{{$route.meta.title}}
时间: 2023-11-01 21:56:39 浏览: 174
根据引用内容,可以得知$route实际上是根组件$root的_route属性。它并没有定义在data里,而是通过调用Vue.util.defineReactive(this, '_route', this._router.history.current)进行响应式监听。所以在组件实例化时,_route对象被赋值为xxx,才会触发响应式监听。而定义在data里的数据在组件实例化时会被初始化。所以{{$route.meta.title}}将会显示当前路由的meta中的title属性。
相关问题
v-wechat-title="$route.meta.title">报错
这个报错一般出现在使用Vue.js开发的项目中,是因为在使用vue-router时,路由的meta对象中未定义title属性。解决方法是在路由的meta对象中定义title属性,如下所示:
```javascript
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
meta: {
title: '首页' // 定义title属性
}
}
]
})
```
然后在App.vue中使用v-wechat-title指令来动态设置页面的标题,如下所示:
```html
<template>
<div v-wechat-title="$route.meta.title">
<!-- 页面内容 -->
</div>
</template>
```
this.$route.matched.filter(item => item.meta && item.meta.title)作用
这段代码是在 Vue.js 中用于获取当前路由的标题。其中,`$route` 是 Vue Router 中的一个属性,表示当前路由信息。`.matched` 表示当前路由匹配到的所有嵌套路径的数组,因为一个路由可以匹配多个嵌套路径。`filter` 是数组的方法,用于过滤出符合条件的元素,这里的条件是元素必须包含 `meta` 属性并且 `meta` 属性中包含 `title` 属性。最后返回的是一个过滤后的数组,数组中的元素就是每个匹配到的路由的标题。
阅读全文
相关推荐
















