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'来声明