1. 程式人生 > >Vue動態設定title(MD.3)

Vue動態設定title(MD.3)

2018-07-18夜晚22:30,漫島已經寫好一些頁面了,目前在等待登入註冊的介面。
專案中需要給不同的頁面設定title,首先查了一下網上有沒有相關外掛,哎,有!爽、

名稱叫做vue-wechat-title,使用方法非常簡單,具體如下:
1.先安裝外掛,命令列執行cnpm install vue-wechat-title --save即可安裝。
2.引用外掛,在main.js中,首先import然後再use即可,具體程式碼如下:

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.在路由的配置檔案router.js

裡面配置我們想要的頁面標題,程式碼示例如下:

routes: [{
            path: '/',
            name: 'index',
            component: Index,
            meta: {
                title: "漫島-一個有趣的網站"
            }
        },
        {
            path: '/recruit',
            name: 'recruit',
            component: Recruit,
            meta: {
                title: "漫島-團隊夥伴招募"
} } ]

4.最後一步,在app.vue裡面新增指令v-wechat-title即可,示例是從官方npm頁面copy的,請注意註釋部分不要破壞使用規則。具體如下:

<!-- 任意元素中加 v-wechat-title 指令 建議將標題放在 route 對應meta物件的定義中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--或者-->
<router-view v-wechat-title="$route.meta.title"
>
</router-view>

好了,這個小外掛就講完了,別再說不能用啊然後罵我啊,畢竟我的網站就這麼用的OK你可以直接上線上看,這鍋我不背。這裡寫圖片描述
後面發現什麼不對的我再回頭來更正,至於SEO的話,以後肯定得研究一下SSR服務端渲染的,到時候再說吧,專案能不能到那一步還是個問題,我說的對吧。歡迎任何想要加入漫島居民群(QQ:581062303)的小夥伴,我在那裡等你們,就一聊天放鬆的群。
晚安啦,各位!