matched&meta获取当前路由中的meta信息注意

2024-07-17 04:00| 来源: 网络整理| 查看: 265

const routes = [ { //协议头://host/query path: '/home', component: Home, meta: { title: '首页' }, children: [ { path: 'news', component: HomeNews }, { path: 'message', component: HomeMessage }, ] }, ]

根据以上代码可知，在’/home’路由下有一个meta信息，注意要传递某些路由信息可以将其放在这里，然后获取其中包含了其title信息，那么我们如何在页面中获取这个title信息呢？打印一下this.$route可知

consolo.log(this.$route)

在这里插入图片描述可以看到，路’/home/news’下的meta中并没有任何信息，为什么？因为我们的meta信息是放在路由’/home’下的，那么难道’/home/news’身为子路由都不能显示’/home’下的信息？不是的，我们点开看看点开matched，就能对应找到此路由下相关路由的信息而matched[0]就是第一个路由’/home’的相关信息，matched[1]就是子路由的信息也就是’/home/news’下的信息，再点开看看

matched: Array(2) 0: beforeEnter: undefined components: {default: {…}} enteredCbs: {} instances: {default: VueComponent} matchAs: undefined meta: {title: "首页"} name: undefined parent: undefined path: "/home" props: {} redirect: undefined regex: /^\/home(?:\/(?=$))?$/i __proto__: Object 1: beforeEnter: undefined components: {default: {…}} enteredCbs: {} instances: {default: VueComponent} matchAs: undefined meta: {} name: undefined parent: {path: "/home", regex: /^\/home(?:\/(?=$))?$/i, components: {…}, instances: {…}, enteredCbs: {…}, …} path: "/home/news" props: {} redirect: undefined regex: /^\/home\/news(?:\/(?=$))?$/i __proto__: Object length: 2 __proto__: Array(0) meta: {} name: undefined params: {} path: "/home/news" query: {} __proto__: Object

可以看到matched[0]中的meta是有我们设置的title信息的，那么怎么让match[1]有路由’/home/news’的信息呢？这么尝试一下，将routes中home下的news补充一个meta

children: [ { path: 'news', component: HomeNews }, { path: 'message', component: HomeMessage }, ]

在这里插入图片描述是不是在this.$route下都有了meta信息？，这个时候我们点开matched

在这里插入图片描述没错,matched[1]下的meta中也有了我们设置的title

【本文地址】

公司简介

联系我们