Vue Router——路由
1. 前端路由的概念与原理
路由(英文名：router)就是对应关系，分为两大类，后端路由和前端路由。
1.1 后端路由
后端路由指的是：请求方式、请求地址与function处理函数之间的对应关系。
express路由的基本用法如下：
const express = require('express')
const router = express.Router()
router.get('/userlist',function(req,res){/* 路由的处理函数 */})
router.post('/userlist',function(req,res){/* 路由的处理函数 */})
module.exports = router1.2 SPA与前端路由
SPA指的是一个web网站只有一个唯一的HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。
结论：在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成。
而前端路由通俗易懂的概念就是：Hash地址与组件之间的对应关系。
1.3 前端路由工作方式
- 用户点击了页面上的路由连接
- 导致URL地址栏中的Hash值发生了变化
- 前端路由监听到了Hash地址的变化
- 前端路由把当前Hash地址对应的组件渲染到浏览器中
结论：前端路由，指的是Hash地址与组件之间的对应关系。
1.4 实现简易的前端路由
步骤1
导入并注册MyHome、MyMovie、MyAbout三个组件：
import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyAbout from './components/MyAbout.vue'
export default{
components:{
MyHome,
MyMovie,
MyAbout
}
}步骤2
通过component标签的is属性，动态切换要显示的组件：
<template>
<h1>APP组件</h1>
<component :is="comName"></component>
</template>
<script>
export default{
data(){
return{
comName:'MyHome',//要展示的组件的名称
}
}
}
</script>步骤3
在组件的结构中声明如下3个 <a>链接，通过点击不同的a链接，切换浏览器地址栏中的Hash值：
<a href="#/homt">Home</a>
<a href="#/movie">Movie</a>
<a href="#/about">About</a>步骤4
在created生命周期函数中监听浏览器地址栏中Hash地址的变化，动态切换要展示的组件的名称：
created(){
window.onhashchange = ()=>{
switch(location.hash){
case '#/home'//点击了“首页”的链接
this.comName='MyHom'
break
case '#/movie' //点击了电影的链接
this.comName='MyMovie'
break
case '#/about' //点击了关于的链接
this.comName='MyAbout'
break
}
}
}2. vue-router的基本用法
vue-router是vue.js官方给出的路由解决方案。它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。
官方文档地址：https://router.vuejs.org/zh/guide/
2.1 基本使用步骤
- 在项目中安装vue-router
- 定义路由组件
- 声明路由链接和占位符
- 创建路由模块
- 导入并挂载路由模块
2.2安装vue-router与定义路由组件
在vue3的项目中，只能按照并使用 vue-router 4.x，安装的命令如下：
npm install vue-router@next -S在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换。
2.3声明路由链接和占位符
使用 <router-link>标签来声明路由链接，并使用 <router-view>标签来声明路由占位符。
<template>
<h1>APP组件</h1>
<!-- 声明路由链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/home">首页</router-link>
<router-link to="/home">首页</router-link>
<!-- 声明路由占位符 -->
<router-view></router-view>
</template>2.4创建路由模块
在项目中创建router.js路由模块，在其中按照如下4个步骤创建并得到路由的示例对象。
1. 从vue-router中按需导入两个方法
import { createRouter,createWebHashHistory } from 'vue-router'其中，createRouter方法用于创建路由的实例对象，createWebHashHistory 用于指定路由的工作模式（Hash模式）。
2.导入需要使用路由控制的组件
import Home from './components/MyHome.vue'
import Movie from './components/MyMovie.vue'
import About from './components/MyAbout.vue'3.创建路由实例对象
const router = createRouter({
//通过history属性指定路由的工作模式
history:createWebHashHistory(),
//通过routes数组，指定路由规则
routes:[
{ path:'/home',component:Home },
{ path:'/movie',component:Movie },
{ path:'/about',component:About },
]
})4.向外共享路由实例对象
export default router5.在main.js中导入并挂载路由模块
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//导入路由模块
import router from './router'
const app = createApp(App)
//挂载路由模块
app.use(router)//app.use()方法用来挂载“第三方的插件模块”
app.mount('#app')3. vue-router的高级用法
3.1 路由重定向
路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
通过路由规则的redirect属性，指的一个新的路由地址，可以很方便设置路由的重定向。
const router = createRouter({
history:createWebHashHistory(),
routes:[
{ path:'/',redirect:'/home'},
{ path:'/home',component:Home },
{ path:'/movie',component:Movie },
{ path:'/about',component:About },
]
})3.2 路由高亮
可以通过如下的两种方式，将激活的路由链接进行高亮显示
- 使用默认的高亮class类
- 自定义路由高亮的class类
3.2.1 默认的高亮class类
被激活的路由链接，默认会应用一个叫做router-link-active的类名，开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：
.router-link-active{
background-color:red;
color:white;
font-weight:bold;
}3.2.2 自定义路由高亮的class类
在创建路由的实例对象时，开发者可以基于linkActiveClass属性，自定义路由链接被激活时所应用的类名：
const router = createRouter({
history:createWebHashHistory(),
//指定被激活的路由链接，会应用router-active这个类名
//默认的router-link-active类名会被覆盖掉
linkActiveClass:'router-active',
routes:[
{ path:'/',redirect:'/home'},
{ path:'/home',component:Home },
{ path:'/movie',component:Movie },
{ path:'/about',component:About },
]
})3.3 嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由。
- 声明子路由链接和子路由占位符
- 在父路由规则中，通过children属性嵌套声明子路由规则。
3.3.1 声明子路由链接和子路由占位符
在About.vue组件中，声明tab1和tab2的子路由链接以及子路由占位符。
<template>
<h3>MyAbout组件</h3>
<!-- 在关于页面中，声明两个子路由链接 -->
<router-link to="/about/tab1">Tab1</router-link>
<router-link to="/about/tab2">Tab2</router-link>
<!-- 在关于页面中，声明tab1和tab2的路由占位符 -->
<router-view></router-view>
</template>3.3.2 通过children属性声明子路由规则
在router.js路由模块中，导入需要的组件，并使用children属性声明子路由规则：
import Tab1 from './components/tabs/MyTab1.vue'
import Tab2 from './components/tabs/MyTab2.vue'
const router = createRouter({
routes:[
{
path:'/about',
component:About,
children:[//通过children属性嵌套子路由规则
{ path:'tab1',component:Tab1 },
{ path:'tab2',component:Tab2 }
]
}
]
})注意：子路由规则path不要以 / 开头
3.4.动态路由
动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用英文的冒号 : 来定义路由的参数项。
//路由中的动态参数以:进行声明后，冒号后面的是动态参数的名称
{ path:'/movie/:id', component:Movie }
//将已下3个路由规则，合并成了一个，提高路由规则的复用性
{ path:'/movie/1', component:Movie }
{ path:'/movie/2', component:Movie }
{ path:'/movie/3', component:Movie }3.4.1 $router.params参数对象
通过动态路由匹配的方式渲染出来的组件中，可以使用$router.params对象访问到动态匹配的参数值
<template>
<!-- $router.params是路由的参数对象 -->
<h3>MyMovie组件---{{$router.params.id}}</h3>
</template>
<script>
export default{
name:'MyMovie',
}
</script>3.4.2 使用props接收路由参数
为了简化路由参数的获取形式，vue-router允许在路由规则中开启props传参：
//1.在定义路由规则时，声明props:true选项
// 即可在Movie组件中，以props的形式接收到路由规则匹配到的参数项
{ path:'/movie/:id', component:Movie, props:true }
<template>
<!-- 3.直接使用props中接收的路由参数 -->
<h3>MyMovie组件---{{id}}</h3>
</template>
<script>
export default{
props:['id'] //2.使用props接收路由规则中匹配到的参数项
}
</script>3.5 编程式导航
通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导 航。例如：
- 普通网页中点击a链接、vue项目中点击router-link都属于声明式导航
- 普通网页中调用location.href跳转到新页面的方式，属于编程式导航
vue-router提供了许多编程式导航的API，其中最常用的两个API分别是：
this.$router.push('hash地址')- 跳转到指定hash地址，从而展示对应的组件
this.$touter.go(数值n)- 实现导航历史的前进、后退
3.5.1 $router.push
调用 this.$router.push()方法，可以跳转到指定的hash地址，从而展示对应的组件页面：
<template>
<h3>MyMovie组件</h3>
<button @click="gotoMovie(3)">Go to Movie</button>
</template>
<script>
export defaule{
methods:{
gotoMovie(id){//id参数是电影的id值
this.$router.push('/movie/${id}')
}
}
}
</script>3.5.2 $router.go
调用 this.$router.go()方法，可以在浏览历史中进行前进和后退
<template>
<h3>MyMovie组件 --- {{id}</h3>
<button @click="goBack">后退</button>
</template>
<script>
export defaule{
props:['id']
methods:{
goBack(){this.$router.go(-1)}//后退到之前的组件页面
}
}
</script>3.6 命名路由
通过name属性为路由规则定义名称的方式，叫做命名路由。
{
path:'/movie/:id',
//使用name属性为当前的路由规则定义一个名称
name:'mov'
component:Movie,
props:true,
}注意：命名路由的name值不能重复，必须保证唯一性。
3.6.1 使用命名路由实现声明式导航
为 <router-link>标签动态绑定to的属性值，并通过name属性指定要跳转到的路由规则，期间还可以使用params属性指定跳转期间要携带的路由参数。
<template>
<h3>MyHome组件</h3>
<router-link :to="{name:'mov',params:{id:3}}">Go to Movie</router-link>
</template>
<script>
export defaule{
name:'MyHome',
}
</script>3.6.2 使用命名路由实现编程式导航
调用push函数期间指定一个配置对象，name是要跳转到的路由规则、params是携带的路由参数：
<template>
<h3>MyMovie组件</h3>
<button @click="toMovie(3)">Go to Movie</button>
</template>
<script>
export defaule{
methods:{
toMovie(id){//id参数是电影的id值
this.$router.push({name:'mov',params:{mid:id}})
}
}
}
</script>3.7 导航守卫
导航守卫可以控制路由的访问权限：
3.7.1 声明全局导航守卫
全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫：
//创建路由实例对象
const router = createRouter({...})
//调用路由实例对象的beforeEach函数，声明全局导航守卫
//fn必须是一个函数，每次拦截到路由的请求，都会调用fn进行处理
//因此fn叫做“守卫方法”
router.beforeEach(fn) 3.7.2 守卫方法的3个形参
全局导航守卫的守卫方法中接收3个形参：
router.beforeEach((to,from,next)=>{
//to 目标路由对象
//from 当前导航正要离开的路由对象
//next是一个函数,表示放行
}) 注意：
- 在守卫方法中如果不声明next形参，则默认允许用户访问每一个路由！
- 在守卫方法中如果声明了next形参，则必须调用next()函数，否则不允许用户访问任何一个路由。
3.7.3 next函数的3种调用方式
- 直接放行：next()
- 强制其停留在当前页面：next(false)
- 强制其跳转到登录页面：next('/login')
3.7.4 结合token控制后台主页的访问权限
//全局前置守卫
router.beforeEach((to, from, next) => {
const tokenStr = localStorage.getItem('token');//1.读取token
if (to.path === '/main' && !tokenStr) { //2.想要访问“后台主页”且token值不存在
next('/login'); //3.1强制跳转到"登录页面"
} else {
next(); //3.2否则直接放行，允许访问“后台主页”
}
});