vue动态改变页面标题有个项目需求是这样的，切换路由动态改变页面的title显示。所以就有个这个，记录一下。设置路由

有个项目需求是这样的，切换路由动态改变页面的title显示。所以就有个这个，记录一下。

设置路由

路由添加meta信息

export default [
  {
    path: '/collect',
    name: 'collect',
    meta: { title: '前台' },
    component: () => import('../index.vue'),
  },
  {
    path: '/details',
    name: 'details',
    meta: { title: '详情'},
    component: () => import('../details/index.vue'),
  },
];

设置title

方式一：

app.vue 监听路由变化设置 title

import { useRoute } from 'vue-router'

const route = useRoute();

watch(() => route.name,(val) => {
  document.title = val;
})

方式二：

vue-rouer守卫前置守卫beforeEach

// router.js

router.beforeEach((to, from) => { 
  document.title = to.meta?.title;
})