Vue動態設定title(MD.3)
阿新 • • 發佈:2018-12-17
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)的小夥伴,我在那裡等你們,就一聊天放鬆的群。
晚安啦,各位!