router.js如何指定标签页标题
时间: 2023-09-11 07:11:00 浏览: 38
在Vue Router中,可以通过在路由组件中定义 `meta` 字段来指定标签页标题。
例如,我们可以在 `router.js` 文件中定义一个路由:
```javascript
import Home from './views/Home.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
title: '首页'
}
}
]
```
在这个路由中,我们定义了一个 `meta` 字段,并指定了 `title` 属性为 `"首页"`。这个 `title` 属性的值会被用作标签页的标题。
接下来,在应用程序的入口组件中,我们可以监听路由变化,并根据当前路由的 `meta` 字段来更新页面标题。例如:
```javascript
<template>
<div>
<h1>{{ pageTitle }}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
pageTitle: ''
}
},
created() {
this.updatePageTitle()
},
watch: {
$route() {
this.updatePageTitle()
}
},
methods: {
updatePageTitle() {
this.pageTitle = this.$route.meta.title || 'My App'
document.title = this.pageTitle
}
}
}
</script>
```
在这个例子中,我们定义了一个 `pageTitle` 数据属性,用于存储当前页面的标题。在组件的 `created()` 钩子中,我们调用 `updatePageTitle()` 方法来初始化页面标题。在组件的 `$route` 属性发生变化时,我们也会调用 `updatePageTitle()` 方法来更新页面标题。
在 `updatePageTitle()` 方法中,我们首先获取当前路由的 `meta` 字段中的 `title` 属性。如果该属性存在,则将其值赋值给 `pageTitle` 数据属性,并将其作为标签页的标题。如果该属性不存在,则使用默认的标题 `"My App"`。