本教程为入门教程，如有错误，请各位前端大佬指出。
1.什么是路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；
首先我们来学习三个单词（route，routes，router）：
route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；
详细描述请参考官方文档router.vuejs.org/zh/guide/es…
2.安装和引用
1. npm install --save vue-router 2. 复制代码
在安装脚手架之后就生成了router/index.js。
这里需要修改router/index.js。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' Vue.use(Router) export default new Router({ routes: [{ //路径 path: '/hello', //引入名称 name: 'HelloWorld', component: HelloWorld }, { //路径 path: '/hello2', //引入名称 name: 'HelloWorld2', component: HelloWorld2 }] }) 复制代码
app.vue 然后在app.vue的，router标签中就会显示HelloWorld.vue。
<template> <div id="app"> QWER <router-view></router-view> </div> </template> <script> export default { name: 'App', data () { return { } } } </script> <style> </style> 复制代码
然后分别访问 http://localhost:8080/#/, http://localhost:8080/#/hello, http://localhost:8080/#/hello2就可以跳转不同的页面了
3.项目中的简单使用
现在我们做一个点击不同按钮跳转不同页面的实验，app.vue是主入口,testlink为导航,根据testlink的导航，跳转到不同页面，router-view是根据导航显示不同的view。
app.vue
<template> <div id="app"> QWER <TestLink /> <router-view></router-view> </div> </template> <script> import TestLink from "./components/TestLink.vue" export default { name: 'App', data () { return { } }, components:{ TestLink, } } </script> <style> </style> 复制代码
testlink.vue（/hello是路由中配置的 随便写两个页面配置路由）
<template> <div> <ul> <li> <router-link tag = "p" to ="/hello">HelloWorld1</router-link> </li> <li> <router-link to ="/hello2">HelloWorld2</router-link> </li> </ul> </div> </template> <script> export default { name: 'TestLink', data () { return { } } } </script> <style> </style> 复制代码
重定向
重定向可以配置从/a到重定向/b。这里当访问"/"时，重定向到anim的路由。/ 完成这个功能需要修改router/index.js文件。
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' Vue.use(Router) export default new Router({ routes: [ //配置重定向--/的时候 跳到 anim路径 { path: '/', redirect: "anim" }, { //路径 path: '/hello', //引入名称 name: 'HelloWorld', component: HelloWorld }, { //路径 path: '/hello2', //引入名称 name: 'HelloWorld2', component: HelloWorld2 }, { //路径 path: '/anim', //引入名称 name: 'anim', component: anim } ] }) 复制代码
4.嵌套路由
一级路由下还有超链接，能够跳不同的页面，在以上代码的情况在，在进入HelloWorld页面后，还有两个超链接 能分别跳到TestNesting1和TestNesting2。以下代码实现嵌套路由的场景。
//TestNesting1两个随便的类 区别不同就可以了 <template> <div> TestNesting1 </div> </template> <script> export default { name: 'TestNesting1', data () { return { } } } </script> 复制代码
如上文一样 在HelloWorld中建立超链接 其中配置的是要跳入的路径加上本身路径。
<template> <div> HelloWorld <ul> <li><router-link to = "/hello/TestNesting1">11111</router-link></li> <li><router-link to = "/hello/TestNesting2">22222</router-link></li> </ul> <router-view> </router-view> </div> </template> <script> export default { name: 'HelloWorld', data () { return { } }, methods:{ } } 复制代码
配置路由文件
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' import TestNesting1 from '@/components/TestNesting1' import TestNesting2 from '@/components/TestNesting2' Vue.use(Router) export default new Router({ routes: [{ path: '/', redirect: "anim" }, { //路径 path: '/hello', //引入名称 传入参数一定要是用 name: 'HelloWorld', component: HelloWorld, //TestNesting1的重定向 //意味着在/hello时跳入/hello/TestNesting1 默认显示/hello/TestNesting1 首页功能 redirect: "/hello/TestNesting1", //嵌套路由 children: [ // UserHome 会被渲染在 User 的 <router-view> 中 { //不要写/ path: 'TestNesting1', component: TestNesting1 }, { path: 'TestNesting2', component: TestNesting2 } ] }, { //路径 path: '/hello2', //引入名称 name: 'HelloWorld2', component: HelloWorld2 }, { //路径 path: '/anim', //引入名称 name: 'anim', component: anim } ] }) 复制代码
5.路由的参数传递
在跳转路由时，也可以传递参数。
首先在index.js配置参数 --需要在path后加入/:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' import TestNesting1 from '@/components/TestNesting1' import TestNesting2 from '@/components/TestNesting2' Vue.use(Router) export default new Router({ routes: [{ path: '/', redirect: "anim" }, { //路径 path: '/hello', //引入名称 传入参数一定要是用 name: 'HelloWorld', component: HelloWorld, //TestNesting1的重定向 //意味着在/hello时跳入/hello/TestNesting1 默认显示/hello/TestNesting1 首页功能 redirect: "/hello/TestNesting1", //嵌套路由 children: [ // UserHome 会被渲染在 User 的 <router-view> 中 { //不要写/ path: 'TestNesting1', component: TestNesting1 }, { path: 'TestNesting2', component: TestNesting2 } ] }, { //路径 path: '/hello2/:id/:money', //引入名称 name: 'HelloWorld2', component: HelloWorld2 }, { //路径 path: '/anim', //引入名称 name: 'anim', component: anim } ] }) 复制代码
在:to ="{name:'HelloWorld2',params:{id:'111',money:'3123123123'}}"中直接加入想要传递的参数即可。
<template> <div> <ul> <li> <router-link to ="/anim">首页</router-link> </li> <li> <router-link :to ="test_router">HelloWorld1</router-link> </li> <li> <router-link :to ="{name:'HelloWorld2',params:{id:'111',money:'3123123123'}}">HelloWorld2</router-link> </li> </ul> </div> </template> <script> export default { name: 'TestLink', data () { return { test_router:"/hello" } } } </script> <style> </style> 复制代码
最后在被跳转页接收。
<template> <div> HelloWorld2 <p>传递的参数为{{$route.params.id}}+{{$route.params.money}}</p> </div> </template> <script> export default { name: 'HelloWorld2', data () { return { } } } </script> 复制代码
6.路由高亮
在router/index.js中加入linkActiveClass: "active"属性，他为所有的路由加入active的class，即可实现高亮。
export default new Router({ //解决历史问题 mode: 'history', //路由高亮 linkActiveClass: "active", routes: [{ path: '/', redirect: "anim" }, { //路径 path: '/hello', //引入名称 传入参数一定要是用 name: 'HelloWorld', component: HelloWorld, //TestNesting1的重定向 //意味着在/hello时跳入/hello/TestNesting1 默认显示/hello/TestNesting1 首页功能 redirect: "/hello/TestNesting1", //嵌套路由 children: [ // UserHome 会被渲染在 User 的 <router-view> 中 { //不要写/ path: 'TestNesting1', component: TestNesting1 }, { path: 'TestNesting2', component: TestNesting2 } ] }, { //路径 path: '/hello2/:id/:money', //引入名称 name: 'HelloWorld2', component: HelloWorld2 }, { //路径 path: '/anim', //引入名称 name: 'anim', component: anim } ] }) 复制代码
然后在路由页面的css中加入以下代码，且指定颜色为红色。
1. <style> 2. .active{ 3. color:red; 4. } 5. </style>
