Vue Spa切換頁面時更改標題的實例代碼

更新時間：2017年07月15日 16:39:17 作者：薛偉杰

本篇文章主要介紹了Vue Spa切換頁面時更改標題的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在Vue組件化開發(fā)過程中，因為是單頁面開發(fā)，但是有時候需要頁面的title根據(jù)情況改變，于是上網(wǎng)查了一下，各種說法花(wo)里(kan)胡(bu)哨(dong)，于是想到一個黑科技 documet.title="xxx";

隨便創(chuàng)建一個項目，在獨立的模塊中，created在鉤子函數(shù)啟動之后document.title='標題'; 但是據(jù)說在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')); //實例化參數(shù)

在組件中頂部添加一段 <div v-wechat-title="$route.meta.title"></div>

即可實現(xiàn)改變title效果。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于axios如何全局注冊淺析
這篇文章主要給大家介紹了關(guān)于axios如何全局注冊的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
完美解決vue 中多個echarts圖表自適應(yīng)的問題
這篇文章主要介紹了完美解決vue 中多個echarts圖表自適應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue如何實現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧
2024-11-11
Vite引入虛擬文件的實現(xiàn)
本文主要介紹了Vite引入虛擬文件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue如何實現(xiàn)本項目頁面之間跳轉(zhuǎn)
這篇文章主要介紹了vue如何實現(xiàn)本項目頁面之間跳轉(zhuǎn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue清除定時器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時器setInterval優(yōu)化方案分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解vue組件基礎(chǔ)
本篇文章給大家總結(jié)了vue組件基礎(chǔ)的相關(guān)知識點以及代碼實例，有需要的朋友可以學(xué)習(xí)參考下。
2018-05-05
6種Vue中常用數(shù)據(jù)加密方式的使用詳解
在Vue.js項目中,你可能需要執(zhí)行數(shù)據(jù)加密以確保敏感信息的安全,這篇文章為大家整理了Vue中常用的6種數(shù)據(jù)加密方式的使用,需要的小伙伴可以參考下
2024-03-03
詳解在Vue中如何模塊化使用Vuex
這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-01-01