$route.fullPath

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

2 path匹配路徑: /path/list

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

路由元信息 .meta

const router = new VueRouter({ routes: [  {   path: '/foo',   component: Foo,   children: [    {     path: 'bar',     component: Bar,     // a meta field     meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換    }   ]  } ]})

先理解什么是路由記錄 ： 路由記錄就是 routes 配置數(shù)組中的對象副本 (還有在 children 數(shù)組)。

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

  //一級路由   {   path: '/foo',   component: Foo,   children: [    {     path: 'bar',     component: Bar,     // a meta field     meta: { requiresAuth: true ,keepAlive:true}//1.權(quán)限 2.內(nèi)存緩存，單頁面切換    }   ]  }  //一級路由的子路由   { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }  //兩者都是  路由記錄

1 定義路由的時候可以配置 meta 字段

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

3 一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組。

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

$route.matched

1 一個數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄

2 一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導(dǎo)航守衛(wèi)中的路由對象) 的 $route.matched 數(shù)組

路由元信息 .meta $route.matched 搭配路由守衛(wèi) 進(jìn)行驗證

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() // 確保一定要調(diào)用 next() }})

以上這篇Vue路由對象屬性 .meta $route.matched詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)之家。