vuejs如何设置title

在Vue.js中设置页面标题可以通过两种方式实现：使用Vue Router设置动态路由标题和使用Vue插件vue-meta设置动态页面标题。下面将详细介绍这两种方式。 第一种方式是使用Vue Router设置动态路由标题。Vue Router是Vue.js的官方路由器，可以用于实现单页面应用（SPA）路由管理。在使用Vue Router时，可以通过配置路由元信息来设置不同页面的标题。示例如下：

使用Vue Router设置动态路由标题：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页' // 设置页面标题为'首页'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于' // 设置页面标题为'关于'
    }
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title // 设置页面标题为路由的meta信息中的title值
  next()
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们通过在路由配置中的meta字段中设置title属性，可以让不同的路由设置不同的页面标题。然后使用Vue Router的beforeEach路由守卫钩子，在每次路由跳转前修改页面标题。 第二种方式是使用Vue插件vue-meta设置动态页面标题。vue-meta是一个插件，它可以将HTML元信息添加到Vue组件中，包括标题、meta标签、样式和脚本等。通过在组件中定义metaInfo对象，可以设置页面的标题。示例如下：

使用vue-meta设置动态页面标题：

// main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App)
}).$mount('#app')

// Home.vue

// About.vue

在上述代码中，我们通过在组件中的metaInfo对象中设置title属性，可以设置页面的标题。vue-meta会自动将该标题添加到对应页面的头部。 综上所述，通过使用Vue Router和vue-meta插件，我们可以在Vue.js中轻松地设置动态页面标题。Vue Router适用于单页面应用的路由管理，通过设置路由元信息来设置页面标题；而vue-meta插件则适用于在组件层级中设置页面标题。根据实际情况选择合适的方式来设置页面标题。