本教程为入门教程，如有错误，请各位前端大佬指出。
1.什么是路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；
首先我们来学习三个单词（route，routes，router）：
route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；
routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS 中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义 routes 是一个数组；所以我们记住了，routes 表示多个数组的集合；
router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候 router 就会去 routes 中去查找 route，就是说路由器会去路由集合中找对应的路由；
详细描述请参考官方文档https://router.vuejs.org/zh/guide/essentials/nested-routes.html
2.安装和引用
npm install --save vue-router
复制代码
在安装脚手架之后就生成了 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 中加入以下代码，且指定颜色为红色。
<style>.active{color:red;}</style>
复制代码
评论