vue-router meta,router中的meta
本文主要介绍了vue路由器定义元信息的元操作，具有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
路由器/index.js
从“vue”导入Vue
从“vue路由器”导入vue路由器
从以下位置导入主页./views/Home.vue
从导入测试./views/Test.vue
从找不到导入./views/NotFound.vue
从导入TestChild./views/TestChild.vue
从导入视图./views/AView.vue
导入视图来源./views/BView.vue
Vue.use(VueRouter)
常量路由=[
{
路径：“/”，
别名：“/home”，
组件：{
默认：首页，
aView: AView，
bView: BView，
},
},
{
路径：“/test/:id”，
名称：“测试”，
组件：测试，
道具：真的，
儿童：[
{
路径：“:名称”，
名称： TestChild ，
组件：TestChild，
道具：真的，
/*
在定义路线时，可以为一些检查配置meta字段，例如在导航警卫中检查，定义的值可以在$route中访问。
*/
元：{
isRequiresAuth:true，
isChecked:false，
}
}]
},
{
路径：“*”，
名称：“未找到”，
组件：未找到
},
]
const router=new VueRouter({
模式：“历史”，
base: process.env.BASE_URL，
路线
})
导出默认路由器
views/TestChild.vue
模板
差异
我是TestChild，正在检查动态路由参数名称：{{name}}
/div
/模板
脚本
导出默认值{
道具：[名字]，
已创建(){
//Print is requires在meta中定义
console.log(这个。$ route . meta . is requires auth)；
},
}
/脚本
style lang=scss 范围
/风格
效果截图：
补充知识：vue-router路由元信息及keep-alive组件级缓存
路由元信息？(黑问号脸？)是不是这么官方的解释会让很多人看起来很傻？那么当我们说meta的时候，是不是很多人突然意识到自己在项目中用过或者见过？
是的，路由元信息是我们定义路由时配置的元字段；那么这个元的作用是什么呢？
首先看一个场景：
通常我们在开发网站或者移动应用的时候，一般都会有网页权限验证的要求(不要说你没有，一定要有)。这个要求一般是指需要登录才能进入，也就是需要登录获取用户令牌或者用户信息才能进入；当这个需求下来的时候，我们作为前端开发者的第一反应就是路由卫士。一个路由前卫可以通过判断to.path来解决；
使用to.path判断权限验证有两个问题：
1:首先，需要权限验证的页面很多怎么办？我们是不是要用if (to)的方式来逐个判断添加的路径。path==/到。path==/home )？
2:然后，路由管理器中会有很多json对象。我们通常称这个json对象为路由记录，可以嵌套，允许父子关系；当我们用if来判断的时候，就会出现不完全匹配的问题。比如匹配/home，那么/home/list呢？这将不匹配；
在我们的理想状态下，如果我要限制/home，那么不管你的路径是/home/index还是/home/home，所有来自home的子路由记录都需要登录才能访问；
这时可以考虑使用元路由信息进行处理；
首先，简单看一下页面效果：
我们路由管理器中的路由记录配置如下：
常量路由=[
{
路径：“/page1”，
组件：第1页，
元：{
登录：真
},
儿童：[
{
路径：“电话”，
组件：电话
},
{
路径：“计算机”，
组件：计算机
},
]
},
{
路径：“/page2”，
组件：第2页，
元：{
登录：假
}
},
]
我们在上面meta中的自定义登录字段是为了标识当前路由是否需要验证令牌；
然后我们的路由前方全球警卫队把守。可以这样写：
router.beforeEach((收件人，发件人，下一个)={
//定义要模拟的令牌
let token="123456 "
//确定传入路由是否需要验证。
if(to.meta.login){
//如果需要验证传入路由
//并且令牌不存在，则跳转到第2页(登录页)
如果(！令牌){
下一个(/page 2 )；
//如果需求验证令牌存在，直接传递
}否则{
next()；
}
//如果不需要验证，就直接发布。
}否则{
next()；
}
})
最终效果图如下：
当然，这只是路由元信息的功能之一。实际上，路由元信息有很多用途，类似于当前路由的一个全局变量，可以通过元来判断；
keep-alive组件：
场景：
当列表项很长时，我们通常需要分页操作。移动端的分页操作基本都是上拉加载下拉刷新；如果我们已经进入了这个列表的第四页，那么当我们想去详情页查看详情的时候，返回的时候页码会直接变成1，因为数据已经初始化了；我们通常需要keep-alive组件来解决这个问题；
Keep-alive是Vue的内置组件，通常用于保持数据状态或者避免重复渲染，也就是我们所说的缓存效果；
使用：
点火电极
成分
！-该组件将被缓存！-
/组件
/保持活力
Keep-alive为我们提供了两个属性，即包含和排除：
Include:接受的值是字符串或正则表达式，只缓存匹配的；
Exclude:接受的值是字符串或正则表达式，匹配的路由不会被缓存；
//组件a
导出默认值{
姓名：甲，
data () {
返回{}
}
}
保持活动状态包括=a
成分
！-名为A的组件将被缓存！-
/组件
/keep-alive可以保持其状态或避免重新呈现。
keep-alive exclude=a
成分
！-将缓存除名称为A的组件之外的所有组件！-
/组件
/keep-alive可以保持其状态或避免重新呈现。
当然，我们也可以根据组件动态缓存。我们知道vue-router是vue官方提供的路由组件：
点火电极
路由器视图
！-所有路径匹配的视图组件都将被缓存！-
/路由器-查看
/保持活力
如果像上面的代码一样，我们所有的路由视图都将被缓存，此时我们可以使用我们的路由元信息，那么让我们修改代码来实现动态缓存：
思路：
元路由信息对象中也有类似的局部变量，可以在有匹配路由的组件中访问。我们可以通过meta定义一个自定义字段来确定识别页面是否需要打开缓存：
//路由配置
导出默认值[
{
路径：“/”，
姓名：家，
成分：家，
元：{
keep:true//需要缓存
}
}, {
路径：“/:id”，
名称：编辑，
组件：编辑，
元：{
KeepAlive: false //不需要缓存
}
}
]
//通过v-if展示动态判断
点火电极
路由器视图v-if=$route.meta.keepAlive
！-下面是将要缓存的视图组件，比如Home！-
/路由器-查看
/保持活力
路由器-查看v-if=！$route.meta.keepAlive
！-下面是没有缓存的视图组件，比如Edit！-
/路由器-查看
以上vue-router定义元信息操作是边肖分享的全部内容。希望能给你一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。