欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-router 导航守卫

程序员文章站 2022-03-25 11:28:08
...

1:  vue-router 路由导航守卫最主要的作用就是监听从哪个页面跳转到哪个页面。

created() {};  生命周期函数 就是组件被创建出来就会回调。

mounted() {};  生命周期函数 就是把template 模板挂载到DOM 元素上就会被回调。

// 路由跳转之前进行回调(守卫)
router.beforeEach((to, from, next)=> {
   // to 需要跳转到的路径
   // from: 从哪个路径跳转而来
   // next()  放行函数
   document.title = to.matched[0].meta.title;
   console.log(to);
   next();    // next() 放行函数
})


meta: 元数据。 (描述数据的数据);

metaclass: 元类,  元类创建类对象, 类对象创建实例对象。
如果是后置钩子,  也就是afterEach,  不需要主动调用next() 函数。

路由后置钩子(hook);   就是路由跳转完成以后回调
router.afterEach((to, from)=> {
  // router 路由跳转之后的钩子
})

 

相关标签: vueRouter