index.js路由配置文件
- 全局前置路由守卫
有路由间的切换就会调用，调用前先验证是否有权限，满足条件则可以切换
// 全局前置路由守卫---检查是否符合跳转条件，比如taobao里点击个人中心，检查是否登录了
router.beforeEach((to,from,next) => {
// 点击了哪个组件，可以拿到这个组件的url、path等信息
console.log('to:',to)
// 从哪个组件跳转过来，可以拿到这个组件的url、path等信息
console.log('from',from)
// 要调用next（）才能真的跳转
console.log('next',next())
})
// 使用统一暴露，方便对路由的控制
export default router
beforeEach.PNG
index.js路由配置文件
- 用一个变量演示跳转条件，满足就跳转，实际生产这个变量可能是token、session、cokie，用于用户鉴权
let num = 6
router.beforeEach((to,_,next) => {
console.log(to)
const test = 4
// 跳到哪个路由组件（每个组件都有自己的路由规则）,用to这个参数，它能获取到组件的path、name之类的，to获取到的这些属性就是$route
//只要点击组件名为name或path 为/home/message其中任意一个组件走if
if(to.name === 'a' || to.path === '/home/message'){
if(test === num){
next()
}
} else{ //点击的不是tongzhi或message其中任意一个组件，直接跳转到刚刚点击的组件
next()
}
})
index.js文件
let num = 6
router.beforeEach((to,_,next) => {
console.log(to)
const test = 4
// 如果要跳转是，很多组件都有判断是否满足条件才能跳转，会造成if里面的语句会很长，我们可以立个flag，flag为true的就判断
// 添加自定义属性flag（名字可以随便取）要在自己的路由规则里面添加meta这个对象，
//再添加自定义属性flag
// if(to.name === 'a' || to.path === '/home/message'){
if(to.meta.flag === true){
if(test=== num){
next()
}
} else{ //直接跳转
next()
}
})
// 要转成统一暴露，方便对路由的控制
export default router
index.js文件
在meta属性添加自定义属性
{
path:'/about',
meta:{
flag:false,
title:'关于'
},
component:About
},
{
path:'/home',
meta:{
flag:false,
title:'主页'
}
index.js文件
- 全局后置路由守卫
// *******************************************
// 全局后置路由守卫---跳转到点击的路由组件后，再进行一些调整，比如给路由组件起标题
// 只有两个参数，分别是to和from，和前置守卫一样可以拿到路由组件的参数，没有next参数
//用于分析、更改页面标题、声明页面等辅助功能
router.afterEach((to) => {
console.log('更改了页面标题')
//点击该路由组件，且成功跳转到这个路由组件了，这样就可以修改组件的标题
document.title = to.meta.title || '自主练习'
})
url标题.PNG
index.js文件
- 设置组件标题（也叫url标题），这个标题也是自定义的属性，在meta添加
{
path:'/about',
meta:{
flag:false,
title:'关于'
},
component:About
},
{
path:'/home',
meta:{
flag:false,
title:'主页' // meta添加了title
},
component:Home,
children:[
{
name:'a',
path:'tongzhi',
meta:{
flag:true,
title:'通知'
},
component:TongZhi
},
index.html（public文件夹下面的index.html）
为了防止刷新的时候，标题会显示项目的name（package.json文件的name），把index.html里面的title标签体修改一下
<!-- 修改默认title -->
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>自主练习</title>
网友评论