溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue中如何實現Spa切換頁面時更改標題的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在Vue組件化開發過程中，因為是單頁面開發，但是有時候需要頁面的title根據情況改變，于是上網查了一下，各種說法花(wo)里(kan)胡(bu)哨(dong)， 于是想到一個黑科技 documet.title="xxx";
隨便創建一個項目，在獨立的模塊中，created在鉤子函數啟動之后document.title='標題'; 但是據說在IOS的微信下是無效的，雖然用蘋果機測試過有用，但是想到這樣會影響我的代碼潔癖。
<script>
export default {
data(){
return{
}
},
created(){
document.title="首頁"
},
}
</script>于是在github上找到一個好用的東西 vue-wechat-title
通過 npm install vue-wechat-title 安裝
引入需要的vue-router與頁面需要的組件之后
const router = new VueRouter({
mode: 'history',
routes:[
{
name: 'index',
path: '/',
meta: {
title: '首頁'
},
component: index
},
{
name: 'root',
path: '/root',
meta: {
title: '肉特'
},
component: root
}
]
});
Vue.use(require('vue-wechat-title')); //實例化參數在組件中頂部添加一段 <div v-wechat-title="$route.meta.title"></div>
即可實現改變title效果。
感謝各位的閱讀！關于“Vue中如何實現Spa切換頁面時更改標題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
