本文主要介紹了Vue動(dòng)態(tài)修改title的方法，需要的朋友可以參考學(xué)習(xí)，方法如下：
1.通過自定義指令去修改（單個(gè)修改比較好）
|
1
2
3
4
5
6
7
8
|
//1.在main.js 頁面里添加自定義指令Vue.directive('title', {//單個(gè)修改標(biāo)題 inserted: function (el, binding) { document.title = el.dataset.title }})//2.在需要修改的頁面里添加v-title 指令<div v-title data-title="我是新的標(biāo)題"></div>. |
2.使用插件 vue-wechat-title
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//1.安裝插件npm vue-wechat-title --save//2.在main.js里面引入插件import VueWechatTitle from 'vue-wechat-title'//動(dòng)態(tài)修改titleVue.use(VueWechatTitle)//3.在路由里面 添加title routes: [{ path: '/login', component: Login, meta: { title: '登錄' } }, { path: '/home', component: Home, meta: { title: '首頁' } },]//4.在app.vue 中添加 指令 v-wechat-title<router-view v-wechat-title='$route.meta.title' /> |
3.通過 router.beforeEach 導(dǎo)航守衛(wèi)來修改
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//1.在router的index里寫自己的路徑和titleconst router = new Router({ routes: [ { path: '/login', component: Login, meta: { title: '登錄', }, }, { path: '/home', component: Home, meta: { title: '首頁', }, }, ],})//2.使用router.beforeEach對(duì)路由進(jìn)行遍歷，設(shè)置titlerouter.beforeEach((to, from, next) => { //beforeEach是router的鉤子函數(shù)，在進(jìn)入路由前執(zhí)行 if (to.meta.title) { //判斷是否有標(biāo)題 console.log(to.meta.title) document.title = to.meta.title } else { document.title = '默認(rèn)title' } next()}) |
4.使用 vue-mate 修改 title
https://github.com/declandewet/vue-meta 文檔中比較詳細(xì)地說明了在瀏覽器端和服務(wù)器端如何使用 vue-meta 修改頁面頭部信息
總結(jié)
到此這篇關(guān)于vue動(dòng)態(tài)設(shè)置頁面title的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)設(shè)置頁面title內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：http://book.levy.net.cn/doc/frontend/vue/vue_title.html
