Vue路由对象属性 .meta $route.matched详解
$route.fullPath
1路由是：/path/:type真正路径是：/path/list
2path匹配路径:/path/list
3fullPath匹配路由:/path/:type
路由元信息.meta
constrouter=newVueRouter({
routes:[
{
path:'/foo',
component:Foo,
children:[
{
path:'bar',
component:Bar,
//ametafield
meta:{requiresAuth:true,keepAlive:true}//1.权限2.内存缓存，单页面切换
}
]
}
]
})
先理解什么是路由记录：路由记录就是routes配置数组中的对象副本(还有在children数组)。
上方代码中的路由记录见下方：
//一级路由
{
path:'/foo',
component:Foo,
children:[
{
path:'bar',
component:Bar,
//ametafield
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搭配路由守卫进行验证
router.beforeEach((to,from,next)=>{
if(to.matched.some(record=>record.meta.requiresAuth)){
//thisrouterequiresauth,checkifloggedin
//ifnot,redirecttologinpage.
if(!auth.loggedIn()){
next({
path:'/login',
query:{redirect:to.fullPath}
})
}else{
next()
}
}else{
next()//确保一定要调用next()
}
})
以上这篇Vue路由对象属性.meta$route.matched详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。