Vue3之路由的元数据信息meta详解
更新时间：2024年05月08日 11:13:15 作者：NorthCastle
这篇文章主要介绍了Vue3之路由的元数据信息meta详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
什么是 meta？
简单的理解，meta 就是路由对象 的一个属性对象，
可以 通过这个 属性给 路由对象添加 一些必要的属性值，
在使用路由对象时可以获取到这个属性型对象，从而进行一些其他的逻辑判断。
meta 这个非常的简单，就是一个属性值。
使用案例
给某个路由配置 meta 对象
在 路由的解析守卫 和 组件中 获取meta 中的值
路由的配置
// 导入 定义路由的两个方法
import {createRouter,createWebHistory} from 'vue-router'
// 引入组件
import componentC from "./componentC.vue";
// 声明路由跳转的路径与组件的对应关系
const routsList = [
{
path:'/c',
name:'croute',
component:componentC,
meta:{
meta1 : '元数据1',
meta2 : true,
meta3 : 1000
}
}
]
// 创建路由的实例对象
const routerConfigObj = createRouter({
history:createWebHistory('abc'), // 带一个参数，表示是路由的一个前缀
routes:routsList // 指定路由的配置列表
})
// 全局解析守卫
routerConfigObj.beforeResolve((to,from)=>{
console.log('解析守卫 ： to : ',to)
console.log('解析守卫 ：from : ',from)
console.log('------')
return true
})
// 导出路由的对象
export default routerConfigObj;
运行效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在一个业务管理系统中，如果我们需要实现权限控制功能，我们需要定义好对应的权限功能点，然后在界面中对界面元素的功能点进行绑定，这样就可以在后台动态分配权限进行动态控制了，权限功能点是针对角色进行控制的，也就是简称RBAC（Role Based Access Control）。2021-05-05
这篇文章主要介绍了对类Vue的MVVM前端库的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
本文主要介绍了vue-socket.io使用教程与踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
用electron写了一个自己用的小软件，无后端，纯本地的数据。最近想着开发一个手机端app，将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈，直接在前端软件中开启接口2022-10-10
这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天，感兴趣的可以了解一下2021-08-08
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下2023-01-01
本篇文章主要介绍了vuejs使用递归组件实现树形目录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论