Vue路由物件屬性 .meta $route.matched詳解

lu92649264發表於2021-01-04
Vue路由物件

$route.fullPath

1 路由是：/path/:type真正路徑是：/path/list

2 path匹配路徑: /path/list

3 fullPath匹配路由: /path/:type

路由元資訊 .meta

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

const router = new VueRouter({

 routes: [

  {

   path: '/foo',

   component: Foo,

   children: [

    {

     path: 'bar',

     component: Bar,

     // a meta field

     meta: { requiresAuth: true ,keepAlive:true}//1.許可權 2.記憶體快取，單網頁切換

    }

   ]

  }

 ]

})

先了解什麼是路由記錄 ： 路由記錄就是 routes 配置陣列中的物件副本 (還有在 children 陣列)。

上方程式碼中的路由記錄見下方：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

  //一級路由

  {

   path: '/foo',

   component: Foo,

   children: [

    {

     path: 'bar',

     component: Bar,

     // a meta field

     meta: { requiresAuth: true ,keepAlive:true}//1.許可權 2.記憶體快取，單網頁切換

    }

   ]

  }

  

  

//一級路由的子路由

  

  { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }

  

  

//兩者都是  路由記錄

1 定義路由的時候可以配置 meta 欄位

2 根據上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄

3 一個路由匹配到的所有路由記錄會暴露為 $route 物件 (還有在導航守衛中的路由物件) 的 $route.matched 陣列。

4 檢查路由記錄中的 meta 欄位 ，我們需要遍歷 $route.matched

$route.matched

1 一個陣列，共含當前路由的所有巢狀路徑片段的路由記錄

2 一個路由匹配到的所有路由記錄會暴露為 $route 物件 (還有在導航守衛中的路由物件) 的 $route.matched 陣列

路由元資訊 .meta $route.matched 搭配路由守衛 進行驗證

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

 if (to.matched.some(record => record.meta.requiresAuth)) {

  // this route requires auth, check if logged in

  // if not, redirect to login page.

  if (!auth.loggedIn()) {

   next({

    path: '/login',

    query: { redirect: to.fullPath }

   })

  } else {

   next()

  }

 } else {

  next() // 保證一定要呼叫 next()

 }

})

以上這篇Vue路由物件屬性 .meta $route.matched詳解就是小編共享給大家的全部內容了，希望能給大家一個參考。

相關文章