1. 基本介绍
router.beforeEach是一个全局前置守卫,用于在路由导航触发前进行一些权限校验或提示。
定义格式
router.beforeEach((to, from, next) => {
// ...
})
参数解释(参数自定义)
to
:目标路由对象
form
:当前所在路由对象
next()
:控制放行,控制放行到哪个路由
使用场景
1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);
2、用户权限;
3、用户输入的路路径是否存在,不存在的情况下如何处理,重定向到哪个页面。
2. 基本使用
比如登录场景
配置导航规则
/*router*/
import { createRouter,createWebHashHistory, createWebHistory } from 'vue-router'
/*配置l路由*/
let routes = [
{
path: '/',
name: 'index',
component: () => import('./index.vue'),
meta: { // 设置导航守卫
isLogin: true, // 初始化 login-main.js-meta标志-router.beforeEach判断-放行
},
children: [
{
path: '/stuAdd',
name: 'stuAdd',
meta: {isRole: '销售经理'},
components: {main: () => import('./components/stuAdd.vue')},
},
{
path: '/stuFind',
name: 'stuFind',
meta: {isRole: '销售经理'},
components: {main: () => import('./components/stuFind.vue')},
},
{
path: '/setting',
name: 'setting',
meta: {isRole: '销售员'},
components: {main: () => import('./components/setting.vue')},
}
],
},
{
path: '/loginE',
name: 'loginE',
component: () => import('./components/login.vue'),
},
{
path: '/404',
name: '404',
component: () => import('./404.vue'),
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
}
]
/*注册路由*/
let router = createRouter({
routes,
history: createWebHistory()
})
router.beforeEach((to, from, next) => {
let role = sessionStorage.getItem('role');
ElMessage.info(role)
console.log(to)
console.log(from)
if (to.meta.isLogin) {
if (!role) {
ElMessage.error("请先登录");
return next('/loginE');
}
}
if (to.meta.isRole) {
if (role !== to.meta.isRole) {
ElMessage.error("您不具备该权限");
return;
}
}
next() // 放行 next('/stuAdd') 放行到哪个路由
})
createApp(App).use(ElementPlus).use(router).mount('#app')
登录区
<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";
let use = useRouter(); // 注意变量名和引入的组件名不能一样
let user = reactive({
role: '销售员',
});
let login = () => {
if (user.name === "admin" && user.pwd === "admin") {
sessionStorage.setItem("role", user.role);
use.push("/");
}
}
</script>
<template>
name:<input name="name" type="text" v-model = "user.name">
pwd: <input name="pwd" type="text" v-model = "user.pwd">
角色:
<el-select v-model = "user.role">
<el-option label = "销售经理" value = "销售经理"></el-option>
<el-option label = "销售员" value = "销售员"></el-option>
</el-select>
<button @click = "login()">登录</button>
</template>
<style scoped>
</style>
首页
<script setup>
import {CirclePlus, Setting, User} from "@element-plus/icons-vue";
</script>
<template>
<el-container>
<el-header>
这里是头部
</el-header>
<el-container>
<el-aside>
<el-menu router = "true">
<el-sub-menu>
<template #title>
<el-icon>
<User/>
</el-icon>
<span>客户管理</span>
</template>
<el-menu-item index = "/stuAdd">
<el-icon>
<CirclePlus/>
</el-icon>
添加客户
</el-menu-item>
<el-menu-item index = "/stuFind">查询客户</el-menu-item>
</el-sub-menu>
<el-menu-item index = "/setting">
<el-icon>
<Setting />
</el-icon>
系统管理
</el-menu-item>
<el-menu-item index = '/loginE'>退出</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view name = "main"></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
.el-header {
background: aquamarine
}
</style>
OK !!! 收尾!!!
若有误区或不能解决,私信我,远程协助你!!!