Vueルートのオブジェクト属性.meta$route.matched詳細


$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.   2.    ,     
    }
   ]
  }
 ]
})
まず、ルーティング記録とは何かを理解してください。ルーティング記録とは、routes配置配列の対象コピーです。
上のコードのルーティング記録は下の通りです。

  //     
  {
   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
1つの配列は、現在のルーティングのすべてのネストされたパスセグメントのルーティング記録を含む。
2つのルートがマッチングした全てのルート記録は$routeオブジェクト(ナビゲーションガードにおけるルートオブジェクト)に曝されます。
ルーティング・エレメント情報.meta$route.matchedは、ルーティング・ガードと組み合わせて検証する。

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です。詳細は小編集が皆さんに共有している内容です。参考にしていただければと思います。どうぞよろしくお願いします。