Vue 全局前置路由守卫 全局后置路由守卫

一、位置

src/router/index.js

const router = new VueRouter({routes:[]
})// 这个地方写全局前置路由守卫或 全局后置路由守卫

export default router

一、全局前置路由守卫

1、时间：初始化时被调用，每次切换前被调用

2、应用场景：控制登录用户的权限

3、语法

router.beforeEach((to, from, next) => {console.log('beforeEach, 被调用')console.log('to', to)console.log('from', from)    
})

4、meta 属性

官方给我们设计的，可以添加自己的属性，在每个路由中

5、使用（权限）

a、在路由中添加meta来判断该路由是否参与

 {path:'news',component: NewsData,meta:{isAuth:true}
}

b、在beforeach中写逻辑

// 初始化 和 切换路由器前被调用
router.beforeEach((to, from, next) => {if(to.meta.isAuth){// 参与部分if(localStorage.getItem('name')==='jojo'){next()}else{alert("用户名不对")}}else{// 不参与的直接next
        next()} 
})

二、全局后置路由守卫

1、时间：初始化被调用，每次切换后被调用

2、应用场景：给每个组件切换标题

3、语法

//初始化时和切换路由后被调用 
router.afterEach((to, from) => {console.log('afterEach')console.log('to',to)console.log('from', from)
})

4、meta属性一样用

5、使用

a、在meta中给每个路由添加title

{path:'news',component: NewsData,meta:{isAuth:true, title:'新闻'},
}

b、写逻辑

//初始化时和  路由切换后被调用 
router.afterEach((to, from) => {document.title = to.meta.title || "学习"console.log('to',to)console.log('from', from)
})

注意：a切换b 这里的to仍指向b