Vue router 路由守衛詳解

Posted on by

一、全局前置beforeEach

當 Local Storage 裡面存儲的 name 是 zhangsan 的時候, 點擊消息才顯示消息內容

1. 全局前置beforeEach

給router添加一個路由守衛 beforeEach

語法 :

router.beforeEach((to, from, next)=>{})

作用 : 初始化的時候 和 在每一次路由切換之前調用beforeEach裡面的函數

參數 :

1.to : 目標路由

2.from : 跳轉前的路由

3.next : 放行

2. 實現

二、需求二

如果有很多個路徑都需要做出判斷以後才跳轉, 就需要寫很多判斷的代碼, 判斷結構就會很復雜

這時需要判斷的路由裡面就可以放一個meta標簽

meta標簽提供關於HTML文檔的元數據 (元數據指用來描述數據的數據)

這時就可以使用meta裡面的標記字段進行判斷

三、全局後置守衛 afterEach

afterEach 和 beforeEach 使用方法基本一致.

區別就是afterEach沒有next這個參數

1. 修改title為自己的title

給每個路由指定自己的title名稱

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home,
      meta: {
        title: "首頁"
      },
      children: [ 
        {
          name: "xiaoxi",
          path: 'message',
          component: Message,
          meta: {
            title: "消息"
          },
          children: [
            {
              name: 'xiangqing',
              path: 'detail',
              component: Detail,
              meta: {
                isAuth: true,
                title: "消息詳情"
              }
            }
          ]
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: "關於"
      }
    }
  ]
})

在 beforEach裡面修改title名

router.afterEach((to, from) => {
  document.title = to.meta.title || "測試"
})

四、組件內守衛

1. beforeRouteEnter

通過路由規則, 進入該組件時被調用

2. beforeRouteLeave

通過路由規則, 離開該組件時被調用

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：