位置: IT常识 - 正文
Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！(vue-introjs)
编辑：rootadmin推荐整理分享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 类型
上一篇：Vue3中简单使用Mock.js(vue mocha)
下一篇：实测：GPT -3.5 与GPT -4.0 编程能力对比(gpt-3的功能)