本文主要介紹了Vue動態修改title的方法，需要的朋友可以參考學習，方法如下：
1.通過自定義指令去修改（單個修改比較好）
//1.在main.js 頁面里添加自定義指令
Vue.directive('title', {//單個修改標題
inserted: function (el, binding) {
document.title = el.dataset.title
}
})
//2.在需要修改的頁面里添加v-title 指令
<div v-title data-title="我是新的標題"></div>.
2.使用插件 vue-wechat-title
//1.安裝插件
npm vue-wechat-title --save
//2.在main.js里面引入插件
import VueWechatTitle from 'vue-wechat-title'//動態修改title
Vue.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 導航守衛來修改
//1.在router的index里寫自己的路徑和title
const router = new Router({
routes: [
{
path: '/login',
component: Login,
meta: {
title: '登錄',
},
},
{
path: '/home',
component: Home,
meta: {
title: '首頁',
},
},
],
})
//2.使用router.beforeEach對路由進行遍歷，設置title
router.beforeEach((to, from, next) => {
//beforeEach是router的鉤子函數，在進入路由前執行
if (to.meta.title) {
//判斷是否有標題
console.log(to.meta.title)
document.title = to.meta.title
} else {
document.title = '默認title'
}
next()
})
4.使用 vue-mate 修改 title
https://github.com/declandewet/vue-meta 文檔中比較詳細地說明了在瀏覽器端和服務器端如何使用 vue-meta 修改頁面頭部信息
總結
到此這篇關于vue動態設置頁面title的文章就介紹到這了,更多相關vue動態設置頁面title內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
