Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！(vue-introjs)

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

推荐整理分享Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！(vue-introjs)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue从入门到精通,vue详解,vue-intro,vue-intro,vue-intro,vue的理解,vue详解,vue的理解,内容如对您有帮助，希望把文章链接给更多的朋友！

目录

vue3导航守卫讲解与使用

element-ui的安装与使用

配置路由和设置路径别名

设置登录页面并实现规则跳转

设置导航前置守卫

设置导航后置守卫

其他路由相关操作

---

vue3导航守卫讲解与使用

导航守卫是在 Vue Router 中提供的一种功能，它允许你在切换路由之前或之后执行一些逻辑。通过使用导航守卫，你可以控制用户是否可以访问路由、重定向、记录路由进入记录等。在 Vue Router 下，导航守卫包括全局守卫、路由独享守卫、组件内守卫，这些守卫可以用来完成不同层次的路由钩子函数。

今天借助讲解导航守卫的这篇文章讲解一个登录页面的案例，详细说明在日常开发过程中应该如何灵活的运用和操作这些函数，这里借助vue组件库 element-ui 进行润色，话不多说直接开整。

element-ui的安装与使用

找到element-ui官网：官方网址 ，然后终端执行如下命令安装第三方包：

# 选择一个你喜欢的包管理器# NPM$ npm install element-plus --save# Yarn$ yarn add element-plus# pnpm$ pnpm install element-plus

安装完成之后，在入口文件 mian.ts 进行插件的挂载：

import { createApp } from 'vue'import App from './App.vue'import {router} from "./router"import ElementUi from 'element-plus'import 'element-plus/dist/index.css'const app = createApp(App)app.use(router)app.use(ElementUi)app.mount('#app')

注意：如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json{ "compilerOptions": { // ... "types": ["element-plus/global"] }}

挂载完成之后，随便在官网上粘一段代码，如下查看效果是否被引入：

配置路由和设置路径别名

在router文件夹下的index.ts文件添加如下代码进行配置路由：

import { createRouter, createWebHistory } from 'vue-router'export const router = createRouter({ history: createWebHistory(), routes: [ { path:'/', component:()=>import('@/components/login.vue') }, { path:"/index", component:()=>import("@/components/index.vue") } ],})

设置路径别名： 如果想在vite创建的vue3+ts项目中进行路径别名配置的话可以参考如下方式：

1）安装@types/node包提供了 Node.js 中核心模块的 TypeScript 类型