vue怎么配置整个网站的标题和当前页面的标题一起展示
时间: 2023-11-22 09:56:07 浏览: 72
你可以在 Vue 中使用 `vue-meta` 插件来设置整个网站的标题和当前页面的标题。
首先,需要安装 `vue-meta` 插件:
```bash
npm install vue-meta --save
```
接着,在你的 Vue 组件中添加以下代码:
```javascript
import Vue from 'vue'
import Meta from 'vue-meta'
Vue.use(Meta)
export default {
name: 'MyComponent',
metaInfo: {
title: '整个网站的标题'
}
}
```
在这个例子中,我们使用了 `metaInfo` 属性来设置整个网站的标题。如果你想在当前页面中设置一个不同的标题,可以在组件的 `data` 属性中定义一个 `pageTitle` 变量,并在 `metaInfo` 中使用它:
```javascript
export default {
name: 'MyComponent',
data () {
return {
pageTitle: '当前页面的标题'
}
},
metaInfo () {
return {
title: this.pageTitle + ' - 整个网站的标题'
}
}
}
```
注意,需要在 `metaInfo` 方法中返回一个对象来设置标题,而不是在组件的 `created` 或 `mounted` 生命周期钩子函数中设置。
这样,就可以同时设置整个网站的标题和当前页面的标题了。
阅读全文