Vuejs生态之vue-router
介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
安装和基本使用
# 模块使用 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> # NPM工程使用 npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 如果使用全局的 script 标签，则无须如此 (手动安装)。
<!-- 基本使用 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div id="app"> <h1>Hello App!</h1> <div> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/">首页</router-link> <router-link to="/about">关于我们</router-link> </div> <div> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </div> <!-- 文件引入 --> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> <script> // 1. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 var routes = [ { 'path': '/', 'component': { template: `<div><h1>首页</h1></div>`, } }, { 'path': '/about', 'component': { template: `<div><h1>关于我们</h1></div>`, } } ]; // 2. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 var router = new VueRouter({ routes: routes // 可缩写为: routes }); // 3. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 new Vue({ el: '#app', router: router }); // 现在，应用已经启动了！ </script> </body> </html>
传参及获取传参
我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件。例如我们有个 `User` 的组件，我们可以这样写：
const routes = [ { // 动态路径参数 以冒号开头 'path': '/user/:name', 'component': { template: ` <div> <h1>我叫: {{$route.params.name}}</h1> </div> `, } }, ]; // 例如想获取查询参数 比如路由是 /user/luffy/?age=10 // 可以这样获取 $router.query.age
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：
| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:name | /user/evan | { name: 'luffy' } |
| /user/:name/post/:post_id | /user/evan/post/123 | { name: 'luffy', post_id: 123 } |
更多API
/* * 一个路由对象 (route object) 表示当前激活的路由的状态信息. * 包含了当前 URL 解析得到的信息, 还有 URL 匹配到的路由记录 (route records) * 路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。 * * 路由对象可在多个地方: * * 1、在Vue组件内，即 this.$route * * 2、在 $route 观察者回调内 * * 3、router.match(location) 的返回值 * * 4、导航守卫的参数： * * router.beforeEach((to, from, next) => { * // `to` 和 `from` 都是路由对象 * }) * * 5、scrollBehavior 方法的参数 * * const router = new VueRouter({ * scrollBehavior (to, from, savedPosition) { * // `to` 和 `from` 都是路由对象 * } * }) */ 对象属性 // 1、$route.path 解释: 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 // 2、$route.params 解释: 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 // 3、$route.query 解释: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。 // 4、$route.hash 解释: 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。 // 5、$route.fullPath 解释: 完成解析后的 URL，包含查询参数和 hash 的完整路径。 // 6、$route.matched 解释: 一个数组，包含当前路由的所有嵌套路径片段的路由记录 // 7、$route.name 解释: 当前路由的名称，如果有的话。 // 8、$route.redirectedFrom 解释: 如果存在重定向，即为重定向来源的路由的名字。
子路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
接着上节：我们在每个username下，都想展示用户的更多信息，/user/:name/more , 那么可以这样做：
// 同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view> const routes = [ { // 动态路径参数 以冒号开头 'path': '/user/:name', 'component': { template: ` <div> <h1>我叫: {{$route.params.name}}</h1> <router-link :to=`/user/${$route.params.name}/more`></router-link> // 另一种路由写法(表示在当前路径地址上追加 more，更加简洁) // <router-link to="more" append></router-link> <router-view></router-view> </div> `, }, // 写法如同父级路由, 作分发操作 children: [ { // 当 /user/:id/more 匹配成功 // more 会被渲染在 User 的 <router-view> 中 path: 'more', component: { template: ` <div> <h1>我叫: {{$route.params.name}}</h1> 我的详细信息是。。。 </div> `, }, } ] }, ];
children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的配置，当你访问 /user/:name/ 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由。
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功， // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome }, // ...其他子路由 ] } ] })
编程式导航（手动访问和传参）
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。
1、router.push(location, onComplete?, onAbort?)
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path
const userId = luffy
router.push({ name: 'user', params: { userId }}) // -> /user/luffy router.push({ path: `/user/${userId}` }) // -> /user/luffy // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
2、router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..." replace> |
router.replace(...) |
3、router.go(n)
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)
4、操作 window.history
router.push、router.replace、router.go 它们都是效仿 window.history API的，那么 ==> Browser History APIs
命名路由
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
// 给该路由起的名字叫做 user const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) // 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象 <router-link :to="{ name: 'user', params: { userId: luffy }}">User</router-link> // 等价于 router.push({ name: 'user', params: { userId: luffy }})
命名视图
导航钩子
元数据及路由匹配
