Vue - 設置每頁的 title 及圖標

Posted on October 3, 2019 本文总阅读量次

過往要設置網頁的 title，直接在 html 中新增一個 tag，在其中的文字就會呈現在網頁標籤中。因此，一個基礎 html 網頁的架構大概會長這樣：

<html>
<head>
　<title>網頁標題</title>
<head>
<body>
　網頁內容
</body>
</html>

然而，通常網站不僅有一個網頁，建議每個網頁應當有一個專屬的title，以便管理。

透過 Vue Router 設置每頁的 title

step0.在自己專案中的 router.js 或 router/index.js 檔案中(依照個人在專案中的檔案命名及路徑)，確定有引入 vue 及 vue-router

1
2
3

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

step1. 加入每個路徑頁面的 meta 資料，且於meta中定義title文字。

const router = new VueRouter({
    routes: [
     {
        path: '/entrance',
        name: 'entrance',
        component: Entrance,
        meta: {
            title: 'Entrance'}
     },{
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            title: 'Login'}
     },{
        path: '/test',
        name: 'test',
        component: Test,
        meta: {
            title: 'Test'}
     }]
})

step2.使用全域 navigation guards 非同步解析執行：當路徑(router object)前往(to) meta.title 時，瀏覽器的 title 為 meta.title

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

step3.最後引出該 router

1	export default router;

在 vue 專案中變更 title 圖示

step1.因為專案會使用 webpack 或 vue-cli 打包，因此將圖片放置根目錄，或是static資料夾中

step2.在 html 的中配置圖片及文字。

<head>
    <title>標題文字</title>
    <!--href中的路徑依照專案實際放置圖示的位置。-->
    <link rel="icon" href="./../static/favicon.ico" type=“image/x-icon> 
</head>

step3.修改 webpack 配置檔案

new HtmlWebpackPlugin({
  //...
  favicon: path.resolve('/static/favicon.ico'), //路徑依照專案實際放置圖示的位置
  //...
})

step4.重新啟用，並適時清除瀏覽器暫存資料，即可正確圖示畫面