vue.js全域路由下的導航守衛的實現-js教程-PHP中文網

vue.js全域路由下的導航守衛的實現

不言

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

原創

1943 人瀏覽過

這篇文章帶給大家的內容是關於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) 檢視）