目录
vue-router是vue的一个插件库，专门用来实现单页Web应用（single page web application，SPA），SPA整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过AJAX请求获取。
路由：
一个路由（route）就是一组映射关系（key-value），key为路径，value可能是function或component，多个路由需要路由器（router）管理。
分类：
1.后端路由：value是function，用于处理客户端提交的请求。当服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
2.前端路由：value是component，用于展示页面内容。当浏览器的路径改变时，对应的组件就会显示。
安装与vue2配套的版本：npm i vue-router@3
应用vue-router：Vue.use(VueRouter)
main.js
// 引入Vue
import Vue from 'vue';
// 引入App组件
import App from './App.vue';
// 引入VueRouter
import VueRouter from 'vue-router';
// 引入路由器
import router from './router'
Vue.config.productionTip = false;
// 应用VueRouter
Vue.use(VueRouter);
new Vue({
? ? el:'#app',
? ? // 将App组件放入容器中
? ? render:h=>h(App),
? ? router,
})基本路由：
新建文件：
?编写router配置项：index.js
// 此文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建并暴露一个router实例对象
export default new VueRouter({
? ? routes:[
? ? ? ? {
? ? ? ? ? ? path:'/about',
? ? ? ? ? ? component:About
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? path:'/home',
? ? ? ? ? ? component:Home
? ? ? ? }
? ? ]
})App.vue
<template>
? ? <div>
? ? ? ? <div>Vue Router Demo</div>
? ? ? ? <div>
? ? ? ? ? ? <!-- 实现切换，active-class可配置高亮样式 -->
? ? ? ? ? ? <!-- router-link实质上还是a标签，所以给a标签写的样式也会应用到router-link -->
? ? ? ? ? ? <router-link to="/about">About</router-link>
? ? ? ? ? ? <router-link to="/home" active-class="active">Home</router-link>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <!-- 指定组件的呈现位置 -->
? ? ? ? ? ? <router-view></router-view>
? ? ? ? </div>
? ? </div>
</template>
<script>
export default {
? ? name:'App',
}
</script>路由组件Home.vue
<template>
? <h2>我是Home</h2>
</template>
<script>
export default {
? ? name:'Home',
}
</script>路由组件About.vue
<template>
? <h2>我是About</h2>
</template>
<script>
export default {
? ? name:'About'
}
</script>
?
注意：
1.做项目时，一般组件通常放在components文件夹中，路由组件放在与它同级的pages文件夹中。
2.通过切换，被换走的路由组件，默认被销毁，需要时再去挂载。
3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
4.整个应用只有一个router，可以通过组件的$router获取到。
嵌套（多级）路由：
配置路由规则，使用children配置项：
routes:[
? ? {
? ? ? ? path:'/about',
? ? ? ? component:About
? ? },
? ? {
? ? ? ? path:'/home',
? ? ? ? component:Home,
? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? // children的path一定不能写成"/children1"(只有根路径前加 "/")
? ? ? ? ? ? ? ? path:'children1',
? ? ? ? ? ? ? ? component:Children1
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? path:'children2',
? ? ? ? ? ? ? ? component:Children2
? ? ? ? ? ? }
? ? ? ? ]
? ? }
]跳转（要写完整路径）：
<router-link to="/home/children1">Children1</router-link>路由传参：
传递参数：
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/children1/grandchild?id=66&title=hello"> Home </router-link>
<!-- 传递m的id和title，要将整个语句放在模板字符串中?-->
<router-link :to="`/home/children1/grandchild?id=${m.id}&title=${m.title}`"> Home </router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
? ? :to="{
? ? ? ? path:'/home/children1/grandchild',
? ? ? ? query:{
? ? ? ? ? ? id:m.id,
? ? ? ? ? ? title:'hello'
? ? ? ? }
? ? }"
>Home</router-link>接收参数：
$route.query.id
$route.query.title命名路由：
可以简化路由的跳转
给路由命名：
{
? ? path:'/grandpa',
? ? component:Grandpa,
? ? children:[ ? ? ?
? ? ? ? {
? ? ? ? ? ? path:'father',
? ? ? ? ? ? component:Father,
? ? ? ? ? ? children:[ ? ? ?
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'son',
? ? ? ? ? ? ? ? ? ? path:'smallest',
? ? ? ? ? ? ? ? ? ? component:Son,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}简化跳转：
<!-- 简化前 -->
<router-link to:"/grandpa/father/smallest">跳转</router-link>
<!-- 简化后通过名字跳转 -->
<router-link :to="{name:'son'}">跳转</router-link>
<!-- 简化写法传递参数 -->
<router-link
? ? :to="{
? ? ? ? name:'son',
? ? ? ? query:{
? ? ? ? ? ? id:m.id,
? ? ? ? ? ? title:'hello'
? ? ? ? }
? ? }"
>跳转</router-link>路由的params参数：
配置路由，声明接收params参数：
{
? ? path:'/grandpa',
? ? component:Grandpa,
? ? children:[ ? ? ?
? ? ? ? {
? ? ? ? ? ? path:'father',
? ? ? ? ? ? component:Father,
? ? ? ? ? ? children:[ ? ? ?
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'son',
? ? ? ? ? ? ? ? ? ? path:'smallest/:id/:title', //使用占位符声明接收params参数
? ? ? ? ? ? ? ? ? ? component:Son,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}传递参数：
<!-- 跳转并携带params参数，字符串写法 -->
<router-link :to:"/grandpa/father/smallest/${{m.id}}/hello">跳转</router-link>
<!-- 跳转并携带params参数，对象写法 -->
<router-link
? ? :to="{
? ? ? ? name:'son',
? ? ? ? params:{
? ? ? ? ? ? id:m.id,
? ? ? ? ? ? title:'hello'
? ? ? ? }
? ? }"
>跳转</router-link>注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置。
接收参数：
$route.params.id
$route.params.title路由的props配置：
让路由组件更方便的收到参数
{
? ? name:'index',
? ? path:'/home/:id',
? ? component:Home,
? ? // 写法一：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
? ? props:{a:99}
? ? // 写法二：props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
? ? props:true
? ? // 写法三：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
? ? props(route){
? ? ? ? return{
? ? ? ? ? ? id:route.query.id,
? ? ? ? ? ? title:route.query.title
? ? ? ? }
? ? }
}<router-link>的replace属性：
可以控制路由跳转时操作浏览器历史记录的模式。浏览器的历史记录有两种写入方式：push和replace，push是追加历史记录，replace是替换当前记录（无法回退），路由跳转时默认为push。
开启replace模式：
<router-link replace...>News</router-link>
编程式路由导航：
可以不借助<router-link>实现路由跳转，让路由跳转更加灵活
//$router的两个API
this.$router.push({
? ? name:'exam',
? ? params:{
? ? ? ? id:xx,
? ? ? ? title:xx
? ? }
})
this.$router.replace({
? ? name:'exam',
? ? params:{
? ? ? ? id:xx,
? ? ? ? title:xx
? ? }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //参数为正前进，为负后退缓存路由组件：
让不展示的路由组件保持挂载，不被销毁（include中写组件名）。
<keep-alive include="Home">
<!-- 多个组件：<keep-alive :include="['Home','About']"> -->
<router-view></router-view>
</keep-alive>两个新的生命周期钩子：
路由组件所独有的两个钩子，用于捕获路由组件的激活状态：
activated路由组件被激活时触发
deactivated路由组件失活时触发
路由守卫：
可以对路由进行权限控制，分为全局守卫、独享守卫、组件内守卫。
全局守卫：
// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
? ? if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
? ? ? ? if(localStorage.getItem('school')==='hzy'){ //权限控制的规则
? ? ? ? ? ? document.title=to.meta.title||'河中医';
? ? ? ? ? ? next(); //放行
? ? ? ? }else{
? ? ? ? ? ? alert('无访问权限！');
? ? ? ? }
? ? }else{
? ? ? ? document.title=to.meta.title ||'河中医';
? ? ? ? next()
? ? }
})
// 全局后置守卫：初始化时执行，每次路由切换后执行
router.afterEach((to,from)=>{
? ? if(to.meta.title){
? ? ? ? document.title=to.meta.title //修改网页title
? ? }else{
? ? ? ? document.title='index'
? ? }
})独享守卫（只有前置，后置用全局守卫）：
{
? ? path:'/about',
? ? component:About,
? ? meta:{title:'关于',isAuth:true},
? ? beforeEnter:(to,from,next)=>{
? ? ? ? if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
? ? ? ? ? ? if(localStorage.getItem('school')==='hzy'){ //权限控制的规则
? ? ? ? ? ? ? ? document.title=to.meta.title||'河中医';
? ? ? ? ? ? ? ? next(); //放行
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? alert('无访问权限！');
? ? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? ? document.title=to.meta.title ||'河中医';
? ? ? ? ? ? next()
? ? ? ? }
? ? }
}组件内路由守卫：
// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
? // ...
},
// 进入守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
? // ...
}路由器的两种工作模式：
对于一个URL来说，“#”及其后面的内容就是hash值，hash值不会包含在HTTP请求中，即hash值不会带给服务器。
hash模式：
1.地址中永远带着“#”。
2.若以后将地址通过第三方手机APP分享，若APP校验合格，则地址会被标记为不合法。
3.兼容性较好。
history模式：
1.地址干净美观。
2.兼容性略差。
3.应用部署上线时需要其它部门人员支持，解决刷新页面服务端404的问题。
（视频：B站尚硅谷）