导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。
对此,vue-route提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。
导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。
贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
你可以使用路由器。beforeEach注册一个全局前置守卫:
const路由器=new VueRouter ({…}）
路由器。beforeEach(下),从=比;{//?
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫解决完之前一直处于等待中。
每个守卫方法接收三个参数:
& # 8226;:路线:即将要进入的目标路由对象
& # 8226;从:路线:当前导航正要离开的路由
& # 8226;下:功能:一定要调用该方法来解决这个钩子。执行效果依赖一方法的调用参数。
& # 9702;
next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是证实(确认的)。
下(错误):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮),那么URL地址会重置到从路由对应的地址。
next(“/?或者下({路径:'/'}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
下(错误):(测试盒框+)如果传下的入参数是一个错误实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调。
确保要调用一方法,否则钩子就不会被解决。
下面写一个例子:
1。列举需要判断登录状态的”路由集合”,当跳转至集合中的路由时,如果”未登录状态”,则跳转到登录页面LoginPage;
2。当直接进入登录页面LoginPage时,如果”已登录状态”,则跳转到首页主页;
从“进口Vue Vue ';
从“vue-router”进口路由器;
进口LoginPage从“@/页面/登录”;
进口从@/home/页面的主页;
从“@/页面/好名单”进口GoodsListPage;
从“@/页面/详细”进口GoodsDetailPage;
从“@/页面/购物车”进口CartPage;
进口ProfilePage从“@/页面/配置文件”;
Vue.use(路由器)
const路由器=new路由器({
路线:[
{
路径:'/',//默认进入路由
重定向:/home//重定向
},
{
路径:/登录,
名称:“登录”,
组件:LoginPage
},
{
路径:/home,
名称:“回家”,
组件:主页
},
{
路径:/好名单,
名称:“好名单”,
组件:GoodsListPage
},
{
路径:/详细,
名称:“详细”,
组件:GoodsDetailPage
},
{
路径:/车,
名称:“购物车”,
组件:CartPage
},
{
路径:/配置文件,
名称:“配置文件”,
组件:ProfilePage
},
{
路径:‘*’,//匹配没有注册的路由
重定向:/home//重定向
},
］
})；//全局路由守卫
路由器。beforeEach(下),从=比;{
console.log (“navigation-guards”);//:路线:即将要进入的目标路由对象//从:路线:当前导航正要离开的路由//下一个:功能:一定要调用该方法来解决这个钩子。执行效果依赖下方法的调用参数。
const nextRoute=[‘回家’,‘好的’,‘详细’,‘车’,“配置文件”);
让isLogin=global.isLogin;//是否登录//未登录状态,当路由到nextRoute指定页时,跳转至登录
如果(nextRoute.indexOf (to.name)在=0){
如果(! isLogin) {
控制台。日志(“什么他妈的”);
路由器。推动({name:“登录”})
}
}//已登录状态,当路由到登录时,跳转至国内
如果(to.name==='登录'){
如果(isLogin) {
路由器。推动({名称:“家”});
}
}
next ();
})；
出口的默认路由器;
以上所述是小编给大家介绍的vue-router实现导航守卫(路由卫士)的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
