三部分
- router(VueRouter实例)守卫 -- 全局路由守卫
- router守卫 -- 路由守卫
- component守卫 -- 组件守卫
- const router = new Router({})
- router.beforeEach(function (to,from,next) {} //
- export default router
router.beforeEach(function (to,from,next) { // console.log(to,from) if(to.name == ‘blog‘) { if(to.matched[0].meta.is_login) { next() }else{ console.log("login") next({name: ‘login‘}) } }else if(to.name == ‘login‘) { if(to.matched[0].meta.is_login) { next({name: from.name}) console.log(from) }else { next() } }else { next() } }) <template> <button @click=‘login‘>LOGIN</button> </template> <script> export default { created() { // console.log(this.$route) }, methods: { login() { // console.log(this.$route) this.$route.matched[0].meta.is_login = true; // this.$router.push({name: ‘blog‘}) // } } } </script>
Vue.use(Router) const router = new Router({ routes: [ { path: ‘/login‘, name: ‘login‘, component: Login, meta: { index: 3, is_login: true }, beforeEnter(to,from,next) { // console.log(to,from) if(to.meta.is_login) { next({name:from.name}) }else{ next() } } } ] }) router.beforeEach(function (to,from,next) { // console.log(to) if(to.name == ‘blog‘) { if(to.matched[0].meta.is_login) { next() }else{ // console.log("login") next({name: ‘login‘}) } }else if(to.name == ‘login‘) { if(to.matched[0].meta.is_login) { next({name: from.name}) // console.log(from) }else { next() } }else { next() } }) export default router
3.
未完待续
vue导航守卫
原文地址:https://www.cnblogs.com/goff-mi/p/9392402.html
时间: 2024-11-08 15:47:01