老师,图1是视频里的,在用到路由前置守卫函数的时候,为啥我控制台这里meta没有isLogin:true,然后写路由元信息的时候没办法进行判断.
//路由的配置页面
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../pages/Home.vue"
import User from "../pages/User.vue"
import News from "../pages/News.vue"
import AD from '../pages/AD.vue'
// import Sports from '../pages/nessub/sports.vue'
// import Yule from '../pages/nessub/yule.vue'
Vue.use(VueRouter)
/*定义路由*/
const routes=[
{//首页
path:'/', //路径,,跟路径
name:"Home",
alias:"Homes", //别名(增加新的名称访问相同的页面)
components:{ //命名视图:同时 (同级) 展示多个视图,同个路由,多个视图就需要多个组件。确保正确使用 components
default:Home, //文件Home
ad:AD
},
beforeEnter: (to, from, next) => { //路由独享守卫(在这里只有跳转到Home页面才会触发路由守卫)
//console.log(from);
console.log(to);
next();
}
},
{//用户中心
path:'/user/:userid/:name',
name:"User",
component:User
},
{//新闻页面
path:'/news',
name:"news",
redirect:"/news/sports", //(定向名)默认显示
component:News,
children:[ //显示子页面(嵌套路由)
{
path:'sports',
component:() => import("../pages/nessub/sports.vue"), //路由懒加载(与异步组件一致)当点击组件时才会被渲染出来
},
{
path:'yule',
component:() => import('../pages/nessub/yule.vue'),
},
]
},
]
/*创建路由对象*/
const router = new VueRouter({
mode: 'history', //去除url地址的#号
//mode:"hash", //默认Url的模式(有#号)
routes
})
router.beforeEach((to, from, next) => { //全局前置守卫构造函数(与全局解析守卫一致)
//console.log(from) //从哪里开始跳转
console.log(to) //跳转到哪里
/**
* 需要判断用户登陆 (路由元信息)
*/
if(to.meta.isLogin){;
//判断用户是否登陆
const token=false;
if(token){
next(); //当token=true时才允许跳转到用户页面
}else{
next("/login") //否则跳转到首页
}
};
next() //允许跳转
})
router.afterEach((to, from) => { //全局后置构造函数
//console.log(from,to);
})
export default router //导出rouer路由对象

