Vue 路由守卫

2022-03-23  本文已影响0人  洪锦一

全局路由守卫

全局前置路由守卫

每次路由切换之前被调用、初始化的时候被调用,写到 router/index.js 目录下

const router = new Router({
  routes,
})

router.beforeEach((to,from,next)=>{
    console.info(to,from)
    next()
})

export default router;
全局后置路由守卫

每次路由切换之后被调用、初始化的时候被调用,写到 router/index.js 目录下

const router = new Router({
  routes,
})

router.afterEach((to,from) => {
    console.info(to,from)
})

export default router;

独享路由守卫

每一个路由独享的,配置在 router/index.js 里面

 {
    path: '/ans',
    name: 'ans',
    component: Ans,
    meta: { title: "探索艾尼斯" },
    beforeEnter: (to, from, next) => {

    }
  },

组件内路由守卫

export default {
  name: "List",
  data() {
    return {
      
    };
  },
  // 组件内路由守卫  通过路由规则,进入该组件时被调用 写到组件内,和data同级
  beforeRouteEnter (to, from, next) {

  }

  // 组件内路由守卫  通过路由规则,离开该组件时被调用
  beforeRouteLeave (to, from, next) {

  }
};
上一篇 下一篇

猜你喜欢

热点阅读