目錄

• 一、全域性前置beforeEach
• 1. 全域性前置beforeEach
• 2. 實現
• 二、需求二
• 三、全域性後置守衛 afterEach
• 1. 修改title為自己的title
• 四、元件內守衛
• 1. beforeRouteEnter
• 2. beforeRouteLeave
• 總結

一、全域性前置beforeEach

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

1. 全域性前置beforeEach

給router新增一個路由守衛 beforeEach

語法 :

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

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

引數 :

1.to : 目標路由

2.from : 跳轉前的路由

3.next : 放行

2. 實現

二、需求二

如果有很多個路徑都需要做出判斷以後才www.cppcns.com跳轉,就需要寫很多判斷的程式碼,判斷結構就會很複雜

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

meta標籤提供關於HTML文件的元資料 (元資料指用來描述資料的資料)

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

三、全域性後置守衛 afterEach

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

區別就是afBrLvyfterEach沒有next這個引數

1. 修改title為自己的title

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

const router = new Router({
  route客棧s: [
    {
      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

通過路由規則,離開該元件時被呼叫

總結

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