导航守卫可以控制路由的访问权限，主要是用来监听路由的进入和离开。
当进入或离开路由组件时，可以通过导航守卫做一些拦截，实现权限登录等功能。
导航守卫分为三种：全局守卫、独享守卫、组件守卫。
参数说明：
每个导航守卫都有三个参数，全局后置守卫 afterEach 除外。
to 表示即将要进入的路由对象
例如：要前往Home页面，那么to就是Home页面的路由信息from 表示即将要离开的路由对象
例如：当前在Login页面，要前往Home页面，那么from就是Login页面的路由信息next 表示是否放行
next() 表示放行
next(false) 表示不放行
next('/login') 表示进入Login页面【path方式】
next({name: 'login'}) 表示进入Login页面【name方式】
全局前置守卫【常用】
一、分别创建 Login.vue、Home.vue、About.vue 这三个路由组件。
<template>
<div>
<h1>Login页面</h1>
<button @click="isHome">登录</button>
</div>
</template>
<script>
export default {
name: "Login",
methods: {
isHome() {
sessionStorage.setItem('uid', 10);
this.$router.push('/');
}
}
}
</script><template>
<div>
<h1>Home页面</h1>
<button @click="isAbout">前往About页面</button>
<br /><br />
<button @click="isBack">退出登录</button>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
isAbout() {
this.$router.push('/about');
},
isBack() {
sessionStorage.removeItem('uid');
this.$router.push('/login');
}
}
}
</script>
<template>
<div>
<h1>About页面</h1>
<button @click="isHome">前往Home页面</button>
</div>
</template>
<script>
export default {
name: "About",
methods: {
isHome() {
this.$router.push('/');
}
}
}
</script>二、在 router 目录下的 index.js 文件中配置全局前置守卫。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
routes
})
// 全局前置守卫
// 初始化的时候会被调用、每次路由切换之前会被调用
router.beforeEach((to,from,next) => {
if(to.name === 'home' || to.name === 'about'){
if(sessionStorage.getItem('uid')){
next();
}else{
next('/login');
}
}else{
next();
}
})
export default router备注：以上表示如果前往 Home.vue 页面或 About.vue 页面，就会判断是否有 uid，如果没有就前往 Login.vue 页面，如果有 uid 就正常跳转。
三、使用 meta 路由元信息，配合导航守卫判断是否需要权限验证。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home,
// 自定义信息，isAuth为true表示需要权限
meta:{ isAuth: true }
},
{
path: '/about',
name: 'about',
component: About,
// 自定义信息，isAuth为true表示需要权限
meta:{ isAuth: true }
},{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
routes
})
// 全局前置守卫
// 初始化的时候会被调用、每次路由切换之前会被调用
router.beforeEach((to,from,next) => {
// 判断是否需要权限
if(to.meta.isAuth){
if(sessionStorage.getItem('uid')){
next();
}else{
next('/login');
}
}else{
next();
}
})
export default router注意：meta 属性表示路由元信息，这个对象里的内容由我们来定义，用于配置一些自定义信息。
四、全局前置守卫总结
router.beforeEach((to,from,next) => {
if(判断是否需要权限){
// 权限处理...
}else{
next();
}
})原创作者：吴小糖文章来源：https://www.toymoban.com/news/detail-645492.html
创作时间：2023.8.12文章来源地址https://www.toymoban.com/news/detail-645492.html
到了这里，关于Vue 导航守卫的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
