Vue3学习笔记（五）——路由，Router
一、前端路由的概念与原理
1.1. 什么是路由
路由（英文：router）就是对应关系。
1.2. SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！
1.3. 什么是前端路由
通俗易懂的概念：Hash 地址与组件之间的对应关系。
1.4. 前端路由的工作方式
① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
结论：前端路由，指的是 Hash 地址与组件之间的对应关系！
1.5. 实现简易的前端路由
步骤1：通过 <component> 标签，结合 comName 动态渲染组件。示例代码如下：
<template>
<div class="main">
<nav>
<a href="#/Home">首页</a> | <a href="#/Movie">电影</a> |
<a href="#/About">关于</a>
</nav>
<section>
<KeepAlive>
<component :is="coms[comName]"></component>
</KeepAlive>
</section>
</div>
</template>
<script lang="ts" setup>
import Home from "./views/Home.vue";
import Movie from "./views/Movie.vue";
import About from "./views/About.vue";
import { ref, KeepAlive, onMounted } from "vue";
let coms = {
Home,
Movie,
About,
};
let comName = ref("Home");
//当页面挂载成功时的钩子
onMounted(() => {
//当hash值变化时的事件
window.addEventListener(
"hashchange",
(event) => {
//#/Home,获取路径名称
let comKey = location.hash.substring(2);
//更换当前组件名称
comName.value = comKey;
},
false
);
});
</script>
<style>
.main a {
color: #00f;
text-decoration: none;
font-size: 16px;
}
.main a:hover {
color: orangered;
}
.main nav {
border-bottom: 2px solid #999;
height: 46px;
line-height: 46px;
}
</style>步骤2：在 App.vue 组件中，为 <a> 链接添加对应的 hash 值：
<nav>
<a href="#/Home">首页</a> |
<a href="#/Movie">电影</a> |
<a href="#/About">关于</a>
</nav>步骤3：在 created 生命周期函数中，监听浏览器地址栏中hash 地址的变化，动态切换要展示的组件的名称：
//当页面挂载成功时的钩子
onMounted(() => {
//当hash值变化时的事件
window.addEventListener(
"hashchange",
(event) => {
//#/Home,获取路径名称
let comKey = location.hash.substring(2);
//更换当前组件名称
comName.value = comKey;
},
false
);
});
二、vue-router 的基本用法
2.1. 什么是 vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
vue-router 的官方文档地址：https://router.vuejs.org/zh/
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
2.2. vue-router 安装和配置的步骤
① 安装 vue-router 包 ② 创建路由模块与路由规则 ③ 导入并挂载路由模块 ④ 声明路由链接和占位符
2.2.1 在项目中安装 vue-router
在 vue3 的项目中，安装 vue-router 的命令如下：
2.2.2 创建路由模块与路由规则
在 src 源代码目录下，新建router/index.ts路由模块，并初始化如下的代码：
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue';
import Movie from '../views/Movie.vue';
import About from '../views/About.vue';
//路由记录集合
let routes:RouteRecordRaw[]=[
{
path:"/",
component:Home
},
{
path:"/home",
component:Home
},
{
path:"/movie",
component:Movie
},
{
path:"/about",
component:About
},
];
//创建路由器
let router=createRouter({
history:createWebHashHistory(), //指定路由模式为hash模式（兼容性好，但带#）
routes
});
//导出
export default router;2.2.3 导入并挂载路由模块
在 src/main.ts 入口文件中，导入并挂载路由模块。示例代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index' //导入路由规则
let app=createApp(App);
//挂载路由中间件
app.use(router);
app.mount('#app')2.2.4 声明路由链接和占位符
router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符：
<template>
<div class="main">
<nav>
<router-link to="/home">首页</router-link> |
<router-link to="/movie">电影</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<section>
<router-view></router-view>
</section>
</div>
</template>
<script lang="ts" setup></script>
<style>
.main a {
color: #00f;
text-decoration: none;
font-size: 16px;
}
.main a:hover {
color: orangered;
}
.main nav {
border-bottom: 2px solid #999;
height: 46px;
line-height: 46px;
}
section {
min-height: 500px;
margin: 0;
}
</style>src/views/Home.vue
<template>
<div class="cls1">
<h2>这是首页 - Home</h2>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
background: #def;
min-height: 500px;
}
.cls1 h2 {
margin: 0;
padding: 0;
}
</style>src/views/Movie.vue
<template>
<div class="cls1">
<h2>这是电影频道 - Movie</h2>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
background: #dfe;
min-height: 500px;
}
.cls1 h2 {
margin: 0;
padding: 0;
}
</style>src/views/About.vue
<template>
<div class="cls1">
<h2>这是关于我们 - About</h2>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
background: #fde;
min-height: 500px;
}
.cls1 h2 {
margin: 0;
padding: 0;
}
</style>运行效果：
三、vue-router 的常见用法
3.1. 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';
//路由记录
let routes:RouteRecordRaw[]=[
{
path:"/",
component:Home
},
{
path:"/movie",
component:Movie
},
{
path:"/about",
component:About
},
{
path:"/film",
redirect:"/movie"
}
];
//创建路由对象
let router=createRouter({
history: createWebHashHistory(), //指定路由模式
routes
})
export default router;3.2. 嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由。嵌套路由也称之为子路由，就是在被切换的组件中又切换其他子组件
例如：在one界面中又有两个按钮，通过这两个按钮进一步切换one中的内容一般都是这种，子路由定义到一级路由里面
点击父级路由链接显示模板内容 ① 模板内容中又有子级路由链接
② 点击子级路由链接显示子级模板内容
3.1 声明子路由链接和子路由占位符
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：
<template lang="">
<div class="about">
<h2>这是About组件 - 关于</h2>
<router-link to="/about/tab1">企业文化</router-link> |
<router-link to="/about/tab2">企业介绍</router-link>
<hr />
<div class="viewBox">
<router-view />
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.about {
border: 1px solid #ccc;
background: #def;
padding: 10px;
margin: 10px;
}
.viewBox {
min-height: 200px;
background: #dfe;
}
</style>3.2 通过 children 属性声明子路由规则
在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';
import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';
//路由记录
let routes:RouteRecordRaw[]=[
{
path:"/",
component:Home
},
{
path:"/movie",
component:Movie
},
{
path:"/about",
component:About,
redirect:"/about/tab1",
children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
},
{
path:"/film",
redirect:"/movie"
}
];
//创建路由对象
let router=createRouter({
history: createWebHashHistory(), //指定路由模式
routes
})
export default router;
3.3. 带参数的动态路由匹配
3.3.1、获取路径参数param、query与hash
思考：有如下 3 个路由链接：
定义如下 3 个路由规则，是否可行?
缺点：路由规则的复用性差。
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：
const User = {
template: '<div>User</div>',
}
// 这些都会传递给 `createRouter`
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：
匹配模式 | 匹配路径 | $route.params |
|---|---|---|
/users/:username | /users/eduardo | { username: 'eduardo' } |
/users/:username/posts/:postId | /users/eduardo/posts/123 | { username: 'eduardo', postId: '123' } |
除了 route.params 之外，route 对象还公开了其他有用的信息，如 route.query（如果 URL 中存在参数）、route.hash 等。你可以在 API 参考中查看完整的细节。
这个例子的 demo 可以在这里找到。
<template lang="">
<div>
<h2>这是Movie组件 - 电影</h2>
<h3>当前id={{ $route.params.id }}</h3>
<h3>当前query={{ $route.query }}</h3>
<h3>当前hash={{ $route.hash }}</h3>
</div>
</template>
3.3.2、使用 props 接收路由参数
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启props 传参。示例代码如下：
{
name:"movie",
path:"/movie/:id?",
component:Movie,
props:true
},Movie.vue
<template lang="">
<div>
<h2>这是Movie组件 - 电影</h2>
<h3>当前id={{ $route.params.id }}</h3>
<h3>当前query={{ $route.query }}</h3>
<h3>当前hash={{ $route.hash }}</h3>
<h3>当前id={{ id }} (props直接接收)</h3>
</div>
</template>
<script>
export default {
setup() {
console.log("组件被创建");
},
created() {
this.$watch(
() => this.$route.params.id,
(toParam, previousParam) => {
console.log(toParam, previousParam);
}
);
},
props: ["id"],
};
</script>
<style lang=""></style>
3.3.3、响应路由参数的变化
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch route 对象上的任意属性，在这个场景中，就是 route.params ：
const User = {
template: '...',
created() {
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
// 对路由变化做出响应...
}
)
},
}或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：
const User = {
template: '...',
async beforeRouteUpdate(to, from) {
// 对路由变化做出响应...
this.userData = await fetchUser(to.params.id)
},
}<template lang="">
<div>
<h2>这是Movie组件 - 电影</h2>
<h3>当前id={{ $route.params.id }}</h3>
<h3>当前query={{ $route.query }}</h3>
<h3>当前hash={{ $route.hash }}</h3>
</div>
</template>
<script>
export default {
setup() {
console.log("组件被创建");
},
created() {
this.$watch(
() => this.$route.params.id,
(toParam, previousParam) => {
console.log(toParam, previousParam);
}
);
},
};
</script>
<style lang=""></style>
3.3.4、捕获所有路由或 404 Not found 路由
常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 :
const routes = [
// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
// 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
{ path: '/user-:afterUser(.*)', component: UserGeneric },
]在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由：
this.$router.push({
name: 'NotFound',
// 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。
params: { pathMatch: this.$route.path.substring(1).split('/') },
// 保留现有的查询和 hash 值，如果有的话
query: this.$route.query,
hash: this.$route.hash,
})
router/index.tsimport {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';
import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';
const NotFound={
template:'<div>没有找到你要访问的页面 404，目标位置：{{$route.params.path}}</div>'
}
//路由记录
let routes:RouteRecordRaw[]=[
{
path:"/",
component:Home
},
{
path:"/movie/:id?",
component:Movie
},
{
path:"/about",
component:About,
redirect:"/about/tab1",
children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
},
{
path:"/film",
redirect:"/movie"
},
{
path:"/:path(.*)*",
component:NotFound
}
];
//创建路由对象
let router=createRouter({
history: createWebHashHistory(), //指定路由模式
routes
})
export default router;
直接定义组件默认是不允许的
开启运行时编译
配置vue.config.js文件，加上下面这一段：
module.exports = defineConfig({
transpileDependencies: true,
runtimeCompiler: true, // 加上这一段
// lintOnSave: false,
})记得保存并重新运行项目
3.4、路由的匹配语法
3.4.1、在参数中自定义正则
当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，所以我们需要一种方法来区分它们。最简单的方法就是在路径中添加一个静态部分来区分它们：
const routes = [
// 匹配 /o/3549
{ path: '/o/:orderId' },
// 匹配 /p/books
{ path: '/p/:productName' },
]但在某些情况下，我们并不想添加静态的 /o /p 部分。由于，orderId 总是一个数字，而 productName 可以是任何东西，所以我们可以在括号中为参数指定一个自定义的正则：
const routes = [
// /:orderId -> 仅匹配数字
{ path: '/:orderId(\\d+)' },
// /:productName -> 匹配其他任何内容
{ path: '/:productName' },
]现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName。routes 数组的顺序并不重要!
TIP
确保转义反斜杠( \ )，就像我们对 \d (变成\\d)所做的那样，在 JavaScript 中实际传递字符串中的反斜杠字符。
{
path:"/:id(\\d{3})?",
component:Movie
},
3.4.2、可选参数
你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选：
const routes = [
// 匹配 /users 和 /users/posva
{ path: '/users/:userId?' },
// 匹配 /users 和 /users/42
{ path: '/users/:userId(\\d+)?' },
]请注意，* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复。
3.5、声明式导航 & 编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
3.5.1、导航到不同的位置
注意：在 Vue 实例中，你可以通过 router 访问路由实例。因此你可以调用 this.router.push。
想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：
声明式 | 编程式 |
|---|---|
<router-link :to="..."> | router.push(...) |
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ：
const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如 undefined、false 等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）来跳过它。
由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。
router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。
App.vue
<template>
<div class="main">
<router-link to="/">首页</router-link> |
<router-link to="/movie">电影</router-link> |
<router-link to="/about">关于</router-link> |
<router-link to="/film">影视</router-link>
<router-view></router-view>
</div>
<button @click="navClick">编程式导航</button>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
function navClick() {
// 字符串路径
//router.push("/movie/100");
// 带有路径的对象
//router.push({ path: "/movie/200" });
// 命名的路由，并加上参数，让路由建立 url
//router.push({ name: "user", params: { username: "eduardo" } });
// 带查询参数，结果是 /movie?plan=private
//router.push({ path: "/movie", query: { plan: "private" } });
// 带 hash，结果是 /about#team
router.push({ path: "/about", hash: "#team" });
}
</script>
<style scoped>
.main {
width: 400px;
border: 2px solid #999;
border-radius: 10px;
padding: 20px;
}
</style>router/index.ts
import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';
import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';
const NotFound={
template:'<div>没有找到你要访问的页面 404，目标位置：{{$route.params.path}}</div>'
}
//路由记录
let routes:RouteRecordRaw[]=[
{
path:"/",
component:Home
},
{
path:"/:id(\\d{3})?",
component:Movie
},
{
name:"movie",
path:"/movie/:id?",
component:Movie
},
{
path:"/about",
component:About,
redirect:"/about/tab1",
children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
},
{
path:"/film",
redirect:"/movie"
},
{
path:"/:path(.*)*",
component:NotFound
}
];
//创建路由对象
let router=createRouter({
history: createWebHashHistory(), //指定路由模式
routes
})
export default router;目标路由组件 target.vue：
<script setup lang="ts"> //setup写在script标签里，是setup(){}的语法糖
import {useRoute} from 'vue-router'
const route = useRoute()
console.log("name:"+route.query.name)//接收参数
</script>3.5.2、替换当前位置
它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
声明式 | 编程式 |
|---|---|
<router-link :to="..." replace> | router.replace(...) |
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
push 和 replace 的区别：
⚫ push 会增加一条历史记录
⚫ replace 不会增加历史记录，而是替换掉当前的历史记录3.5.3、横跨历史
该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。
例子
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)router.go 的简化用法在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：① router.back()⚫ 在历史记录中，后退到上一个页面
② $router.forward() ⚫ 在历史记录中，前进到下一个页面
3.6. 导航守卫
导航守卫可以控制路由的访问权限。示意图如下：
6.1 全局前置守卫 每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：
6.2 守卫方法的 3 个形参 全局前置守卫的回调函数中接收 3 个形参，格式为：
6.3 next 函数的 3 种调用方式 参考示意图，分析 next 函数的 3 种调用方式最终导致的结果： 当前用户拥有后台主页的访问权限，直接放行：next() 当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(‘/login’) 当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)
6.4 控制后台主页的访问权限
总结 ① 能够知道如何在 vue 中配置路由 ⚫ createRouter、app.use(router)
② 能够知道如何使用嵌套路由 ⚫ 通过 children 属性进行路由嵌套
③ 能够知道如何实现动态路由匹配 ⚫ 使用冒号声明参数项、this.$route.params、props: true
④ 能够知道如何使用编程式导航⚫ this.router.push、this.router.go
⑤ 能够知道如何使用导航守卫 ⚫ 路由实例.beforeEach((to, from, next) => { /* 必须调 next 函数 */ }) ———————————————— 版权声明：本文为CSDN博主「薄荷糖C」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/HXBest/article/details/122657154