vue.js全局路由下的导航守卫的实现-js教程-PHP中文网

vue.js全局路由下的导航守卫的实现

不言

发布： 2018-08-23 16:35:11

原创

1966 人浏览过

本篇文章给大家带来的内容是关于vue.js全局路由下的导航守卫的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

什么是导航守卫？

笼统的说，导航守卫是控制用户能够进入哪些路由和不能进入哪些路由的控制器，也就是管理路由的

打比方，在你第一次进入网站，想写博客时，你必须先登录，才能进入博客编写；登陆界面就好比你能进入的路由，而博客是你不能进入的路由，当你登陆后，控制器才会给你权限，才能进入博客路由，这就是导航守卫的用途

全局路由要在 main.js 文件下创建

想用导航守卫先要有路由

//main.js
const router= new VueRouter({
  routes:[
    {path:&#39;/&#39;,name:&#39;home&#39;,component:Home},
    {path:&#39;/menu&#39;,name:&#39;menu&#39;,component:Menu},
    {path:&#39;/admin&#39;,name:&#39;admin&#39;,component:Admin},
    {path:&#39;/about&#39;,name:&#39;about&#39;,component:About,redirect: {name:&#39;contactLink&#39;},children:[   //二级路由
        {path:&#39;/about/contact&#39;,name:&#39;contactLink&#39;,component:Contact},
        {path:&#39;/history&#39;,name:&#39;historyLink&#39;,component:History},
        {path:&#39;/delivery&#39;,name:&#39;deliveryLink&#39;,component:Delivery},
        {path:&#39;/orderingGuide&#39;,name:&#39;orderingGuideLink&#39;,component:OrderingGuide,redirect:{name:&#39;phonelink&#39;},children: [  //三级路由
            {path:&#39;/phone&#39;,name:&#39;phonelink&#39;,component:Phone},
            {path:&#39;/name&#39;,name:&#39;namelink&#39;,component:Name}
          ]},
      ]},
    {path:&#39;/login&#39;,name:&#39;login&#39;,component:Login},
    {path:&#39;/register&#39;,name:&#39;register&#39;,component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

登录后复制

利用上面路由对象 router 的方法 beforeEach() 实现导航守卫

//main.js
//to:跳转到的路由 from:从哪个路由离开  next:显示函数
router.beforeEach((to,from,next)=>{     
  if(to.path == &#39;/login&#39; || to.path == &#39;/register&#39;){
    next();
  }else{
    alert("请先登录");
    next(&#39;/login&#39;);
  }
});

登录后复制

‘/login’ '/register' 为自己定义的路由地址

to.path 为跳转到的路由地址

next() 为显示当前路由内容

next('/login') 跳转到指定路由并显示指定路由的内容

to 对象可获取的信息（console.log(to) 查看）