vue中meta路由元信息

最新推荐文章于 2024-06-26 10:58:26 发布

孟孟_mengmeng

最新推荐文章于 2024-06-26 10:58:26 发布

阅读量2.7k

点赞数 4

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_40922656/article/details/114079571

版权

本文介绍了Vue中路由元信息的概念及其用途，包括用于验证用户登录、设置页面标题以及控制组件缓存等。在组件内，可以通过`this.$route.meta`访问元信息，而在全局路由守卫中，可以利用`router.beforeEach`来操作meta属性。路由元信息为实现动态路由控制提供了便利。

摘要由CSDN通过智能技术生成

路由元信息：

meta:

每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回{}

在组件中：

this.$route.meta获取该组件的路由元信息，如果未定义，则返回{}

在路由中:

通过router.beforeEach((to,from,next)=>{
　　　　　　console.log(to.meta) 　　}) 　　给每个路由的配置项多一个meta属性 meta:{ 　 }

路由元信息用途:

根据每个路由特有的信息
1.验证用户是否登录
2.设置标题
3.是否显示某个组件
4.组件是否缓存……

举例说明：

验证用户是否登录，设置标题，举例：

import Vue from 'vue'
import Router from 'vue-router'
import Header from "../components/header"
import Detail from "../components/goodsDetails"
import Login from "../components/login"
import goodsList from "../components/goodsList"
Vue.use(Router)

let<