正文
vue-router入门随笔
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
下面整理根据官方文档以及自我理解整理，如有不足，请指教。
下面是来自一段官方的原话。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
来一个简单的栗子
1 js
2 // 引入vue
3 // 引入vue-router， 假如是模块化编程，需要Vue.use(VueRouter)来使用插件
4
5 // 1、引入组件，定义也可
6 import Bar from './Bar'
7
8
9
10
11 // 2、定义路由
12 const routes = [
13 {path: '/bar', component:Bar}
14 ]
15
16 // 3、创建一个router实例，然后传入routes
17
18 const router = new VueRouter({
19 router
20 })
21
22 // 4、创建跟实例并挂载
23 cosnt app = new Vue({
24 router
25 }).$mount('#app')
这样一个简单的路由就实现了，可以在vue的根实例就来访问路由。比如：this.$router,this.$route
this.$router: 表示用来访问路由器
this.$route: 表示当前路由
比如：this.$router.go(-1) 用来后退一步，而this.$route.params查看当前路由url的参数
这里的 this.$router和上诉代码的router实例其实是一致的 ，如：也可以直接使用上面的router实例来进行操作，当然这样的话，就需要在每一个需要使用路由的地方来引入路由，这样的话略显麻烦。所以还是采取使用this.$router来使用的比较方便。
另一个概念： 视图
视图：路由匹配到的组件讲渲染到改视图处，这往往很有用，比如将一个页面切分成很多区域，实际路由实际去刷新那一部分区域即可。
1 <div class="app">
2 <p>
3 <!-- 使用 router-link 组件来导航. -->
4 <!-- 通过传入 `to` 属性指定链接. -->
5 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
6 <router-link to="/bar">Go to Bar</router-link>
7 </p>
8 <!-- 路由出口 -->
9 <!-- 路由匹配到的组件将渲染在这里 -->
10 <router-view></router-view>
11 </div>
动态路由：
上面的路由都是写死的，比如/bar，但实际业务可能不止这样，所以可以使用动态路由来进行匹配
1 const City = {
2 template: '<div>城市名字： {{$route.params.cityname}}</div>'
3 }
4
5 const router = new VueRouter({
6 routes: [
7 // 动态路由的参数，由冒号开头表示
8 { path: '/city/:cityname'， component: City}
9 ]
10 })
11
12 // 这样，当路由访问到/city/广州，这样模板中，就会渲染出城市的名字，所以可以用$route.params来获取动态参数。
动态路由是可以嵌套的。
如：/city/:cityname/select/:select_id, 这里就有两个动态路由了。对应的cityname和select_id的值都会设置到$route.params中。
通配符匹配： 可以使用*来匹配任意路径，这往往是有用的，毕竟谁也不想用户直接看到404状态码。
1 {
2 // 这样会匹配所有的路径
3 path: '*'
4 }
5
6 // 通配符的位置需要放置路由的最后。
7 // 这里因为路由匹配的规则是根据路由定义的先后来跳转的
8
9 // 所以下面这种是错误的，会一直匹配到*
10 cosnt error = {
11 template: '<div>嘿，这里不是你该来的</div>'
12 }
13
14 const routes = [
15 {
16 path： ‘*’，
17 component: error
18 },
19 {
20 // 正常路由
21 path: '/city‘,
22 component: xxx
23 }
24 ]
25
所有为了避免这种情况，还是把通配符放最后吧。
1 // 这样就正常了
2 const routes = [
3 {
4 // 正常路由
5 path: '/city‘,
6 component: xxx
7 },
8 {
9 path： ‘*’，
10 component: error
11 }
12 ]
这里就关于路由的匹配优先级的问题， 路由的优先级是根据定义的顺序来排的
在使用通配符的时候，$route.params会自动添加一个pathMatch的参数，包含着URL通过通配符的部分。
1 // 如果按照上诉的路由
2 this.$router.push(/cityname) // 由于没有该路由，所以匹配通配符
3 this.$route.params.pathMatch // ’cityname‘
嵌套路由 ：嵌套路由属于经常通用的情况，毕竟/aaa显示一个组件,/aaa/bbb显示是另一个组件，所以嵌套来使路由便于管理
1 const router = new VueRouter({
2 routes: [
3 { path: /city/:id, component: City,
4 children: [{
5 // 当路由进入 /city/:id/post 匹配成功
6 // 注意这里不能写/post，这样会直接匹配到根路由，也就失去了嵌套路由的意义
7 path: 'post'，
8 component；CityPost
9 }]
10 }
11 ]
12 })
13
14 // 嵌套路由使用children作为子级的路由，这样可以嵌套多层路由，子子孙孙孙孙孙无穷尽
编程式内容 ：
导航路由的时候，我们可以使用<router-link :to="xxx">来渲染成a标签来进行导航，可以使用this.$router的方法进行导航。
router的方法是
效仿
window.history的api
router.push(location, onComplete, onAbort)
--location（路由地址）是必选的，其他两个是回调方法，在新版本中，会直接返回一个promise，直接.then来进行回调就可
// 推入路由来显示，vue-router的路由模式应该是根据栈来设计的（不知道，瞎讲的，没看过源码）
// 打脸了，还真是栈，不过是history栈，这个方法会向history栈，推入一条记录。
所以<router-link :to=“xxx”>和router.push(“xxx”) 是一样的。
--location: 这个参数可以是一个字符串路径，也可以是一个对象
1 // 字符串
2 router.push(’city‘)
3
4 // 对象
5 router.push({path: 'ciry'})
6
7 // 命名路由, 相当于给路由定义一个名字，需要在路由那边使用name来定义
8 router.push({name: 'user', params: {userId: '123'}})
9 // 这里为什么使用path呢，由于使用path的话，params会被忽略掉，因为参数本来就是路径的一部分，所以要写满带参数的路径
10 // 如：
11 router.push({ path: `/user/${userId}` })
12
13
14
15 // 带查询参数，变成 /register?plan=private
16 router.push({ path: 'register', query: { plan: 'private' }})
router.replace(location, oncomplete, onAbort)
参数上同，不同点，在于不会像history添加新纪录，而是替换掉
<router-link :to="" replace> // 声明式
router.go(n)
--n是一个整数，用来表示在history中前进或者后退几步，和window.history.go(n)原理 ,超出记录的长度则失败
命名路由：通过来个路由起一个别名来进行访问
1 // 上诉代码块中，使用名字，是需要像下面这样使用name来定义就可
2 const router = new VueRouter({
3 routes: [
4 {
5 path: '/user/:userId',
6 name: 'user',
7 component: User
8 }
9 ]
10 })
命令视图：视图时路由的出口，组件渲染在这里，但是视图可以有多个，来渲染多个组件.
router-view中使用name属性来定义，默认不填为default
路由配置时，使用components来配置（需要添加s）
1 const router = new VueRouter({
2 routes: [
3 {
4 path: '/',
5 components: {
6 default: Foo,
7 a: Bar,
8 b: Baz
9 }
10 }
11 ]
12 })
重定向：重新定位到另一个位置,在路由配置中使用
redirect：'路径xxx'来声明
