1、简介
Vue Router 是 Vue.js 的官方路由管理器，在官方文档中描述的功能包括：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 history 模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
这里，还是先附上官方文档的链接：https://router.vuejs.org/zh/
2、安装
（1）通过 CDN 引用
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
（2）通过 NPM 安装与使用
- 安装
> npm install vue-router
- 使用
在项目中需要通过 Vue.use() 明确安装路由功能
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3、入门
下面，我们用一个简单的例子来体会一下 Vue Router 的基本使用方法
首先创建一个命名为 index.html 的文件，然后在文件中输入如下代码（具体请看代码注释）：
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello</h1> <p> <!-- 默认渲染成 <a> 标签，通过 to 属性指定路径 --> <router-link to="/home">Home</router-link> | <router-link to="/about">About</router-link> </p> <!-- 路由匹配到的组件渲染到这里 --> <router-view></router-view> </div> <script> // 1、定义组件 const Home = { template: ` <div> <h3>Home Page Here</h3> <p>This is home page</p> </div> ` } const About = { template: ` <div> <h3>About Page Here</h3> <p>This is about page</p> </div> ` } // 2、定义路由 const routes = [ { path: '/home', // 匹配的路径 component: Home // 显示的组件 }, { path: '/about', component: About } ] // 3、创建 router 实例，传入 routes 配置 const router = new VueRouter({ routes // 缩写，相当于 routes : routes }) // 4、创建并挂载根实例 const app = new Vue({ router // 注入路由 }).$mount('#app') </script> </body> </html>
当我们打开页面时，URL 为 index.html#/
如果我们点击 Home，URL 跳转为 index.html#/home（此时，匹配路由 /home，显示组件 Home）
如果点击 About，URL 跳转为 index.html#/about（此时，匹配路由 /about，显示组件 About）
4、动态路由
下面考虑这样一个需求，我们要为路由 /user/Alice和 /user/Bob 指定使用同一个组件 User
再泛化一点来说就是为每一个不同的用户（路由为 /user/xxx）都指定使用同一个组件
这时候，动态路由就可以派上用场啦
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello</h1> <router-view></router-view> </div> <script> const User = { // 在模板中我们可以用 $route 对象中的 params 属性获得 URL 参数 template: '<p>The user name is {{ $route.params.name }}</p>' } const routes = [ { path: '/user/:name', // 以冒号开头表示参数，可以同时使用多个参数 component: User } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
这时候，我们手动输入 URL index.html#/user/Alice，页面会显示 The user name is Alice
如果再输入 index.html#/user/Bob，页面显示会变成 The user name is Bob
但是需要注意，从 /user/Alice 导航到 /user/Bob，原来的组件将会被复用，而不是重新创建
这意味着什么？这意味着组件的生命周期钩子不会再被调用
如果希望路由参数变化时组件能够作出响应，有两个办法：
- 使用
watch属性监测$route对象
const User = { template: ` <div> <p>The user name is {{ $route.params.name }}</p> </div> `, watch: { '$route': function (to, from) { console.log('changed') } } }
- 使用
beforeRouteUpdate导航护卫
const User = { template: ` <div> <p>The user name is {{ $route.params.name }}</p> </div> `, beforeRouteUpdate (to, from, next) { console.log('changed') } }
5、命名路由
在上面的例子中，我们使用 path 标识一个路由，事实上，我们还可以使用 name 为路由设置名称
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello</h1> <!-- 在链接到一个命名路由时，需要给 <router-link> 元素的 to 属性动态绑定一个对象 --> <router-link :to="{ name: 'user', params: { name: 'Alice'} }">To Alice User Page</router-link> </div> <script> const User = { template: '<p>The user name is {{ $route.params.name }}</p>' } const routes = [ { name: 'user', // 为路由设置名称 path: '/user/:name', component: User } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
6、命名视图
与上面类似，我们可以使用 name 为 <router-view> 设置名称，这允许我们在一个路由中使用多个同级的视图
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello</h1> <router-link to="/home">To Home Page</router-link> <router-view name="header"></router-view> <!-- 为视图设置名称 --> <router-view></router-view> <!-- 没有命名，默认为 default --> <router-view name="footer"></router-view> </div> <script> const Header = { template: '<h3>This is header</h3>' } const Container = { template: '<span>This is container</span>' } const Footer = { template: '<p>This is footer</p>' } const routes = [ { path: '/home', // 使用 components 选项，不是 component components: { // 对象，键为视图名称，值为组件名称 default: Container, header: Header, footer: Footer } } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
7、嵌套路由
在实际应用中，除了会有使用多个同级视图的情况，还有使用嵌套视图的情况，这时候我们有嵌套路由与之匹配
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello</h1> <router-link to="/home">To Home Page</router-link> <router-link to="/home/intro">To Intro Page</router-link> <router-link to="/home/info">To Info Page</router-link> <router-view></router-view> </div> <script> const Home = { // 在组件中也可以包含 <router-view> template: ` <div> <p>This is home page</p> <router-view></router-view> </div> ` } const Info = { template: '<p>This is info page</p>' } const Intro = { template: '<p>This is intro page</p>' } const routes = [ { path: '/home', component: Home, // 使用 children 选项，相当于在子组件中配置 routes children: [ { path: 'intro', // 相当于 /home/intro component: Intro // 渲染在 Home 的 <router-view> 中 }, { path: 'info', // 相当于 /home/info component: Info // 渲染在 Home 的 <router-view> 中 } ] } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
8、组件传参
还记得在动态路由那一小节的例子吗？我们使用 $route.params 获取 URL 参数
const User = { template: '<p>The user name is {{ $route.params.name }}</p>' } const routes = [ { path: '/user/:name', component: User } ]
这样的写法，使得组件与对应的路由高度耦合，所以我们可以使用 props 进行解耦
const User = { props: ['name'], // 使用 props 属性 template: '<p>The user name is {{ name }}</p>' } const routes = [ { path: '/user/:name', component: User, props: true // 使用 props 属性，除了使用布尔值，还可以使用对象和函数 } ]
9、编程式导航
在上面的例子中我们多次使用 <router-link> 进行导航，实际上我们还可以使用 router.push()
该方法有三个参数，分别是 location、onComplete 和 onAbort，它们的含义如下：
- location：指定目标 URL，可以是字符串或对象
- onComplete：导航成功后的回调函数
- onAbort：导航终止后的回调函数
router.replace() 与 router.push() 十分类似
不同之处在于 push 会向 history 栈中添加新的记录，而 replace() 将会直接替换当前的 history 记录
文章知识点与官方知识档案匹配，可进一步学习相关知识
