介绍
如何在vue2.0中实现导航守卫?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
vue是什么 vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。
贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
<强>全局守卫
你可以使用路由器。beforeEach注册一个全局前置守卫:
const router =, new VueRouter ({,,,})
router.beforeEach(下),,,,,=祝辞,{
,//?
}) 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫解决完之前一直处于等待中。
每个守卫方法接收三个参数:
<李> :路线:即将要进入的目标路由对象
<李> :路线:当前导航正要离开的路由
<李> :功能:一定要调用该方法来解决这个钩子。执行效果依赖一方法的调用参数。
<李> next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是证实(确认的)。
<李> 下(错误):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮),那么URL地址会重置到从路由对应的地址。
<李> 下(& # 39;/& # 39;)或者next({路径:& # 39;/& # 39;}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
<李> 下(错误):(测试盒框+)如果传下的入参数是一个错误实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调。
确保要调用一方法,否则钩子就不会被解决。
<强>下面写一个例子:
1。列举需要判断登录状态的”路由集合”,当跳转至集合中的路由时,如果”未登录状态”,则跳转到登录页面LoginPage;
2。当直接进入登录页面LoginPage时,如果”已登录状态”,则跳转到首页主页;
import Vue 得到& # 39;vue # 39;;
import Router 得到& # 39;vue-router& # 39;;
import LoginPage 得到& # 39;@/页面/登录# 39;;
import HomePage 得到& # 39;@/页面/回家# 39;;
import GoodsListPage 得到& # 39;@/页面/good-list& # 39;;
import GoodsDetailPage 得到& # 39;@/页面/good-detail& # 39;;
import CartPage 得到& # 39;@/页面/车# 39;;
import ProfilePage 得到& # 39;@/页面/概要# 39;;
Vue.use(路由器)
const router =, new 路由器({
,路线:[
{才能
,,,路径:& # 39;/& # 39;,,//,默认进入路由
,,,重定向:& # 39;/回家# 39;,,//重定向
,,},
{才能
,,,路径:& # 39;/登录# 39;
,,,的名字:& # 39;登录# 39;
,,组件:LoginPage
,,},
{才能
,,,路径:& # 39;/回家# 39;
,,,的名字:& # 39;回家# 39;
,,组件:主页
,,},
{才能
,,,路径:& # 39;/good-list& # 39;
,,,的名字:& # 39;good-list& # 39;
,,组件:GoodsListPage
,,},
{才能
,,,路径:& # 39;/good-detail& # 39;
,,,的名字:& # 39;good-detail& # 39;
,,组件:GoodsDetailPage
,,},
{才能
,,,路径:& # 39;/车# 39;
,,,的名字:& # 39;车# 39;
,,组件:CartPage
,,},
{才能
,,,路径:& # 39;/概要# 39;
,,,的名字:& # 39;概要# 39;
,,组件:ProfilePage
,,},
{才能
,,,路径:& # 39;* * & # 39;,,,//,错误路由
,,,重定向:& # 39;/回家# 39;,,//重定向
,,},
,)
});//,全局路由守卫
router.beforeEach(下),,,,,=祝辞,{
,console.log (& # 39; navigation-guards& # 39;);
,//:,路线:,即将要进入的目标,路由对象
,//:,路线:,当前导航正要离开的路由
,//下一个:功能:,一定要调用该方法来,resolve 这个钩子。执行效果依赖,next 方法的调用参数。
,const nextRoute =,(& # 39;回家# 39;,,& # 39;good-list& # 39;,, & # 39; good-detail& # 39;,, & # 39;车# 39;,,& # 39;概要# 39;];
,let isLogin =, global.isLogin;,//,是否登录
,//未登录状态,当路由到nextRoute指定页时,跳转至登录
,if (nextRoute.indexOf (to.name),祝辞=,0),{,
if 才能;(! isLogin), {
,,console.log (& # 39; what 他妈的# 39;);
,,router.push({,名字:& # 39;登录# 39;,})
,,}
,}
,//已登录状态,当路由到登录时,跳转至home
,if (to.name ===, & # 39;登录# 39;),{
if 才能;(isLogin), {
,,router.push({,名字:& # 39;回家# 39;,});
,,}
,}
接下来,();
});
export default 路由器;
