文档章节

vue-router学习总结

汤免费
 汤免费
发布于 2017/04/24 10:31
字数 1010
阅读 74
收藏 1
点赞 0
评论 0

vue-router学习

vue-router介绍

路由的快速开始

  • 定义各页面容器组件

  • 定义路由配置文件

  • 在入口文件添加路由配置信息

  • 修改跟组件页面信息

  • 接下来可以启动项目查看路由跳转

路由基础知识介绍

动态路由

  • 你可以通过:给一个路由添加参数
  • 之后在组件中通过this.$route.params.参数名获取+ this.$route的api文档https://router.vuejs.org/zh-cn/api/route-object.html
  • 当路由参数发生变化的时候,组件不会被卸载而是复用,这也意味着组件的生命周期钩子不会再被调用,那么你只能监听$routes实例属性知道路由发生了变化
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

嵌套路由

  • 如果有嵌套路由,要用children属性去配置,路由路径会自动拼接
  • 可以给一个页面初始化一个组件用空路由实现

用代码进行路由跳转

  • 在组件中你可以通过this.$route获取路由对象
-  字符串
router.push('home')

- 对象
router.push({ path: 'home' })

- 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

- 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

命名路由

  • 有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建Router实例的时候,在routes配置中给某个路由设置名称。
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
  • 要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  • 这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { userId: 123 }})

命名视图

  • 在跳转一个路由的时候可以同时渲染页面中的多个坑
  • 如果 router-view 没有设置名字,那么默认为 default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
  • 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向和别名

  • 重定向也是通过 routes 配置来完成,重定向的目标也可以是一个命名的路由,甚至是一个方法:
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/c', redirect: { name: 'foo' }},
    { path: '/d', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})
  • 当路由路径太深的时候,你可以给路由起一个别名,那么通过别名和访问太深的路由的页面渲染效果是一样的
  • 『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?
  • /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
  • 上面对应的路由配置为:
const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

三种history

  • mode
  • 类型: string
  • 默认值: "hash" (浏览器环境) | "abstract" (Node.ls 环境)
  • 可选值: "hash" | "history" | "abstract"
  • 配置路由模式:
  • hash: 使用URL hash值来做路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。查看官方HTML5 History模式
  • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的API,路由会自动强制进入这个模式。

导航钩子

  • 可以在钩子里做权限校验和日志记录
  • 一共有三种导航钩子,在钩子中别忘了一定要调用next方法
  • 官方网址

© 著作权归作者所有

共有 人打赏支持
汤免费
粉丝 21
博文 6
码字总数 12118
作品 0
海淀
前端工程师
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
07/11
0
0
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
04/19
0
0
Vue.js构建项目笔记1:vue-cli

一.一些简单的话 如果你学习或者使用过angularjs(1.x),你就会非常了解指令的使用,如:ng-click ng-if ng-show ng-src。当然还有控制器和各种服务。 如果你学习或者使用过react,你就会非...

透笔度
2017/10/18
0
0
Vue入坑——vue-cli(脚手架)代码详解

上一篇:vue-cli目录结构认识 一起学vue——vue学习总路线 ——————————^~^我是萌萌哒分割线^~^———————————————— 前言 上一篇简单认识了脚手架的目录结构,这篇我们...

铸剑为犁413
05/09
0
0
Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟
05/21
0
0
Step-by-step,打造属于自己的 Vue SSR

编者按:本文由 玩弄心里的鬼 发表于掘金,已授权奇舞周刊转载 笔者最近在和小伙伴对vue项目进行ssr的升级,本文笔者将根据一个简单拿vue cli构建的客户端渲染的demo一步一步的教大家打造自己...

奇舞周刊
04/17
0
0
关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod
05/21
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
Vue.js构建项目笔记2:vuejs+vue-router

一.使用vue文件 继续1的学习,我们知道使用: 可以把.vue文件的内容解析成组件对象的形式: 解析类似如下: 我们使用es6的语法,把render的回调处理参数使用这种处理: 显示正常: 二.组件使...

透笔度
2017/10/19
0
0
Vue 2.x 实战之后台管理系统开发(二)

1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在...

小和子茶
07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高效编写Dockerfile的几条准则

概述 Dockerfile 是专门用来进行自动化构建镜像的编排文件(就像Jenkins 2.0时代的Jenkinsfile是对Jenkins的Job和Stage的编排一样),我们可以通过 docker build 命令来自动化地从 Dockerfi...

小致dad
30分钟前
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
9
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
7
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
193
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部