首頁 > web前端 > js教程 > 主體

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

不言
發布: 2018-08-23 16:35:11
原創
1937 人瀏覽過

這篇文章帶給大家的內容是關於vue.js全局路由下的導航守衛的實現 ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

什麼是導航守衛?

籠統的說,導航守衛是控制用戶能夠進入哪些路由和不能進入哪些路由的控制器,也就是管理路由的

打比方,在你第一次進入網站,想寫博客時,你必須先登錄,才能進入博客編寫;登陸界面就好比你能進入的路由,而博客是你不能進入的路由,當你登陸後,控制器才會給你權限,才能進入博客路由,這就是導航守衛的用途

全域路由要在main.js 檔案下創建

想用導航守衛先要有路由

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

利用上面路由物件router  的方法beforeEach() 實作導航守衛

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

'/login'   '/register'  為自己定義的路由位址

to.path 為跳到的路由位址

next() 為顯示目前路由內容

next('/login') 跳到指定路由並顯示指定路由的內容

to 物件可取得的資訊(console.log(to) 檢視)

#相關推薦:

VueRouter 守衛守衛該怎麼使用

# Vue動態重定向與

航######守護######################################################### ######

以上是vue.js全域路由下的導航守衛的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!