1. 认识vue-router
Angular的ngRouter
React的ReactRouter
Vue的vue-router
Vue Router 是Vue.js的官方路由：
- 它与Vue.js核心深度集成，让Vue.js构建单页应用（SPA）变得非常容易；
- 目前Vue路由最新的版本是4.x版本。
vue-router是基于路由和组件的
- 路由用于设定访问路径，将路径和组件映射起来
- 在vue-router的单页面应用中，页面的路径的改变就是组件的切换
安装Vue Router
npm install vue-router
2. 路由的基本使用
App.vue
<template> <div> <div>app</div> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view> </div> </template> <script> </script> <style> </style>
router/index.js
import { createRouter,createWebHashHistory,createWebHistory } from "vue-router"; import Home from '../Views/Home.vue' import About from '../Views/About.vue' // 创建一个路由：映射关系 const router = createRouter({ // 指定采用的模式 hash // history:createWebHashHistory(), // 使用history模式 history:createWebHistory(), routes:[ {path:'/',redirect:'/home'}, { path:"/home", component:Home }, { path:"/about", component:About } ] }) export default router
Home.vue
<template> <div> home </div> </template> <script> export default { // name:"Home" } </script> <style scoped> </style
About.vue
<template> <div> About </div> </template> <script> export default { } </script> <style scoped> </style>
3.路由模式 （history和hash）
// 指定采用的模式 hash history:createWebHashHistory(), // 使用history模式 history:createWebHistory(),
4. 不记录历史（replace）
<router-link to="/about" replace>关于</router-link>
5. to属性绑定对象
<router-link :to="{path:'/about'}" replace>关于</router-link>
6. 所在路由样式修改
.router-link-active{ color: red; font-size: 30px; }
设置默认选中class （active-class）
<router-link :to="{path:'/about'}" active-class="link-active">关于</router-link
7. 路由的懒加载和其他属性
分包处理
const Home = () => import("../Views/Home.vue"); const About = () => import("../Views/About.vue");
分包处理后，不知道那个文件编译打包的，我们可以用魔法注释 （/ webpackChunkName:‘about’ /）
const Home = () => import(/* webpackChunkName:'home' */"../Views/Home.vue"); const About = () => import(/* webpackChunkName:'about' */"../Views/About.vue");
8.获取参数
在template中获取
{{ $route.params.id }}
在compistion-api中获取
<script setup> import { useRoute,onBeforeRouteUpdate } from 'vue-router'; const route = useRoute(); console.log(route.params.id) // 获取route跳转id (路由守卫) onBeforeRouteUpdate((to,from)=>{ console.log("from:",from.params.id) console.log("to:",to.params.id) }) </script>
在options-api中获取id
this.$route.params.id
9.路由不存在
router/index.js
{ path:"/:pathMatch(.*)*", component:()=>import('../Views/Notfound.vue') } • 1
Notfound.vue
<template> <div> 您的页面没找到{{ $route.params.pathMatch }} </div> </template> <script> export default { } </script> <style scoped> </style>
10.编程式路由跳转的使用
<template> <!-- 其他元素调整 --> <span @click="go_home">首页</span> <button @click="go_about">关于 </button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter() // 监听元素点击 function go_home(){ // 调整到首页 // router.push('/home') router.push({ // name:"home" path:'/home' }) } function go_about(){ // 调整到关于 router.push({ path:'/about', query:{ name:'why', age:18 } }) } </script>
options-api写法
<script> export default{ methods:{ go_home:function(){ // 调整到首页 // router.push('/home') this.$router.push({ // name:"home" path:'/home' }) }, go_about:function(){ // 调整到关于 this.$router.push({ path:'/about', query:{ name:'why', age:18 } }) } } } </script>
页面的前进和后退
<script setup> import { useRouter } from 'vue-router' const router = useRouter(); function back(){ // router.back() // router.forward() // go(delta) // go(1) -> forward(); // go(-1) -> back() router.go(-1) } </script>
11. 动态添加路由
动态添加路由
router/index.js
let isAdmin = true if(isAdmin){ // 一级路由 router.addRoute({ path:"/admin", component:()=>import("../Views/Admin.vue") }) // 添加vip页面 router.addRoute("home",{ path:"vip", component:()=>import('../Views/HomeVip.vue') }) }
删除路由有以下三种方式：
- 方式一：添加一个name相同的路由
- 方式二：通过removeRoute方法，传入路由的名称
- 方式三：通过addRoute方法的返回值回调
路由的其他方法补充
- router.hasRoute():检查路由是否存在。
- router.getRoutes():获取一个包含所有路由记录的数组。
12. 路由导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的：
它有两个参数：
- to：即将进入的路由Route对象；
- from：即将离开的路由Route对象；
它有返回值：
- false：取消当前导航
- 不返回或者undefined：进行默认导航
- 返回一个路由地址：
- 可以是一个string类型的路径
- 也可以是一个对象，对象中包含path,query,params等信息
可选的第三个参数：next（不推荐使用）
- 在Vue2中我们是通过next函数来决定如何进行跳转的；
- 但是在Vue3中我们是通过返回值来进行控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；
Vue-Router还提供了很多其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：
https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
我们一起来看一下完整的导航解析流程：
- 导航的触发
- 在失活的组件里调用beforeRouteLeave守卫。
- 调用全局的beforeEach守卫
- 在重用的组件里调用beforeRouteUpdate守卫
- 在路由配置里调用beforeEnter
- 解析一部路由组件
- 在被激活的beforeResolve守卫
- 导航被确认
- 调用全局的afterEach钩子
- 触发DOM更新
- 调用beforeRouterEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的传入参数。
感谢大家观看，我们下次再见
