vue中title标题动态化

在Vue中，你可以使用Vue Router和组件的生命周期钩子来动态设置页面的标题。下面是一个简单的示例代码：

1. 首先，在Vue项目中安装Vue Router（如果还没有安装）：

npm install vue-router

2. 在Vue项目的入口文件（通常是main.js）中导入Vue Router，并创建一个路由实例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  // 配置路由
});

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

3. 在路由配置中，为每个路由添加一个`meta`字段，用于存储页面标题的信息。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: '首页' }, // 设置首页标题为'首页'
    },
    // 其他路由配置...
  ],
});

4. 创建一个全局的导航守卫，用于在路由切换时更新页面标题。在main.js文件中添加如下代码：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || '默认标题'; // 如果路由配置中没有设置标题，则使用默认标题
  next();
});

现在，当你切换到不同的路由时，页面的标题会动态更新为对应路由的标题。你可以根据自己的需要，在路由配置中设置不同页面的标题。