web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等,这些事情可以通过接收属性对象的meta
属性来实现
定义路由的时候你可以配置 meta
字段,这个meta
就是路由元信息
利用meta
配合导航守卫完成判断用户是否登录在允许打开用户中心页面
xxxxxxxxxx
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import UserInfoView from "../views/UserInfoView.vue"
import LoginView from "../views/LoginView.vue"
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
meta:{
requiresAuth:false
}
},
{
path: '/userinfo',
name: 'userinfo',
component: UserInfoView,
meta:{
requiresAuth:true
}
}
]
})
router.beforeEach((to,from,next) =>{
let token = false;
if(to.meta.requiresAuth){
if(!token){
next({
path:"/login"
})
}else{
next()
}
}else{
next()
}
})
export default router