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;

运行效果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue-cli集成axios请求出现CORS跨域问题及解决

    Vue-cli集成axios请求出现CORS跨域问题及解决

    这篇文章主要介绍了Vue-cli集成axios请求出现CORS跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,
    2023-10-10
  • 详解auto-vue-file:一个自动创建vue组件的包

    详解auto-vue-file:一个自动创建vue组件的包

    这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下
    2019-04-04
  • Vue中常用的鼠标移入移出事件详解

    Vue中常用的鼠标移入移出事件详解

    这篇文章主要给大家介绍了关于Vue中常用的鼠标移入移出事件的相关资料,鼠标移入移出事件在 Vue 中可以通过@mouseenter和@mouseleave来绑定,需要的朋友可以参考下
    2023-07-07
  • Vue3使用setup如何定义组件的name属性详解

    Vue3使用setup如何定义组件的name属性详解

    vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue模拟el-table演示插槽用法的示例详解

    Vue模拟el-table演示插槽用法的示例详解

    很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,并且自己写一个类似el-table的组件,感兴趣的可以了解一下
    2023-05-05
  • vite 项目中如何使用Sass

    vite 项目中如何使用Sass

    Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下
    2024-04-04
  • 解决vite打包后白屏之router-view不生效问题

    解决vite打包后白屏之router-view不生效问题

    这篇文章主要介绍了解决vite打包后白屏之router-view不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue实现星级评价效果实例详解

    Vue实现星级评价效果实例详解

    这篇文章主要介绍了Vue实现星级评价效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue打包之后的dist文件如何运行

    vue打包之后的dist文件如何运行

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下
    2023-05-05
  • vite构建vue3项目的全过程记录

    vite构建vue3项目的全过程记录

    vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下
    2023-01-01

最新评论