Vueルートのオブジェクト属性.meta$route.matched詳細
2062 ワード
$route.fullPath
1ルートは:/path/:typeの真のパスは:/path/listです。
2 path整合経路:/path/list
3 fullPath整合ルート:/path/type
ルーティング元情報.meta
上のコードのルーティング記録は下の通りです。
2上記のルーティング構成によれば、/foo/barというURLは、親経路記録及びサブルーティング記録に一致します。
3つのルーティングがマッチングした全てのルーティング記録は、$routeオブジェクト(ナビゲーションガードにおけるルーティングオブジェクト)の$route.matched配列に曝される。
4ルート記録のmetaフィールドを確認します。
$route.matched
1つの配列は、現在のルーティングのすべてのネストされたパスセグメントのルーティング記録を含む。
2つのルートがマッチングした全てのルート記録は$routeオブジェクト(ナビゲーションガードにおけるルートオブジェクト)に曝されます。
ルーティング・エレメント情報.meta$route.matchedは、ルーティング・ガードと組み合わせて検証する。
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です。詳細は小編集が皆さんに共有している内容です。参考にしていただければと思います。どうぞよろしくお願いします。