VUE3.x設定頁面標題，避免一閃而顯示專案的目錄名稱

概述：在實際中，發現VUE專案修改一個網頁的標題也是很麻煩的，還得折騰一下，專案建立的會有一個預設的title就是建立專案的名稱，修改不同元件的title可如下實現：

1、在router/router.js裡每個元件下增加meta

import { createRouter, createWebHistory } from 'vue-router'import Login from '../views/Login.vue'import Main from '../views/Main.vue'import Sort from '../views/Sort.vue'import Discover from '../views/Discover.vue'import Cart from '../views/Cart.vue'import Me from '../views/Me.vue'const routes = [  {    path: '/',    redirect: '/login',    meta: {       hidden: true     }  },  {    path: '/login',    name: 'Login',    component: Login,    meta:{      title:"莎琪"    }  },  {    path: '/main',    name: 'Main',    component: Main  },  {    path: '/sort',    name: 'Sort',    component: Sort  },  {    path: '/discover',    name: 'Discover',    component: Discover  },  {    path: '/cart',    name: 'Cart',    component: Cart  },  {    path: '/me',    name: 'Me',    component: Me  },  {    path: '/about',    name: 'About',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  },]const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes})export default router

2、在main.js裡新增如下程式碼

//修改標題router.beforeEach((to, from, next) => {    if (to.meta.title) {        document.title = to.meta.title    }    next();})

3、以上是可以修改標題，但卻出現了不和諧的結果，總是一閃而顯示專案的目錄名稱如“bj9420”，然後再是想要顯示的標題“莎琪”，雖然只是短暫一閃，那還是在根"/"中加了meta:{hidden:true}後，相對要好點，徹底解決辦法是，在以上的基礎上，打包後，在dist/index.html中，將title修改成想要顯示的名稱：