Vite 動態title

安裝 vue-page-title

vue-page-title

yarn add vue-page-title # npm i --save vue-page-title

在mail.ts內新增

import { createApp } from 'vue';

import { pageTitle } from 'vue-page-title';//引入vue-page-title

import VueGtag from 'vue-gtag-next';//引入ga
// @ts-ignore 
import VueTelInput from 'vue3-tel-input';//引入國際電話下拉表單
// @ts-ignore
import 'vue3-tel-input/dist/vue3-tel-input.css'//引入國際電話下拉表單style
//引入router 
import router from './router/index'
import App from './App.vue'

const app = createApp(App)
    app.use(router)
    app.use(pageTitle({ router }));//動態title
    app.use(i18n);//i18n
    app.use(pinia);//pinia
   
    app.use(VueGtag, {
        property: {
            //id: 你的 google 分析追蹤碼
            id: import.meta.env.VITE_API_URL,
        },
    }) 
    app.use(VueTelInput, allCountries);//使用國際電話下拉表單
   
app.mount('#app')

router meta title名字

import { createRouter, createWebHashHistory } from 'vue-router';
import FooComponent from 'path/to/foo-component';
import HomeComponent from 'path/to/home-component';

const routes = [
  {
    path: '/',
    component: HomeComponent,
    meta: {
      title: import.meta.env.VITE_API_TITLE +'Home Page', // Title must be a string.
    },
  },
  {
    path: '/foo',
    component: FooComponent,
    meta: {
      title: 'Foo Page',
    },
  },
];

export default createRouter({
  history: createWebHashHistory(),
  routes,
});

結論：

1. 安裝 vue-page-title
2. main.ts引入 vue-page-title
3. main.ts使用與Router搭配使用 app.use(pageTitle({ router }))
4. router page 必須加入 meta: { title: 'Page Name', },

vue-page-title 範例