淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
更新時間：2017年11月08日 16:57:27 作者：魔幻冰揚
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前端框架如Vue、React等都是單頁面的應用，也就是說整個web站點其實都是一個index頁面，所謂的頁面跳轉(zhuǎn)都是替換index.html里邊的內(nèi)容，而頁面的title是在每個頁面初始化的時候才設(shè)置一次。對于現(xiàn)在的前端框架，傳統(tǒng)的每個頁面設(shè)置title標簽的做法是不行的。
推薦使用vue-wechat-title插件
下載安裝插件依賴
npm install vue-wechat-title --save
在main.js中引入插件
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
在路由文件 index.js中給每個路由添加title
routes: [{
path: '/',
name: 'index',
component: index,
meta:{
title:'首頁' // 標題設(shè)置在這里
}
},{
path:'/detail',
name:'detail',
component:detail,
meta:{
title:'詳情頁' // 標題設(shè)置在這里
}
}]
在app.vue中修改router-view組件
<router-view v-wechat-title='$route.meta.title'></router-view>
重啟試試，可以了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js之slot深度復制的相關(guān)資料，文中介紹的很詳細，對大家具有一定的參考價值，需要的朋友們來一起看看吧。2017-03-03
這篇文章主要介紹了vue中實現(xiàn)組件跟隨鼠標位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue對枚舉值轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了使用md5在vue中的axios請求時加密API問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn)
Vue提供了一個h()函數(shù)用于創(chuàng)建vnodes,本文就來介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細介紹了vue微信分享出來的鏈接點開是首頁問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本篇文章主要介紹了Vuex之理解state的用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue項目打包后瀏覽器緩存問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3父子同信的雙向數(shù)據(jù)的項目實現(xiàn)
我們知道的是，父傳子的通信，和子傳父的通信，那如何實現(xiàn)父子相互通信的呢，本文就來詳細的介紹一下，感興趣的可以了解一下2023-08-08
vue項目中swiper輪播active圖片實現(xiàn)居中并放大
這篇文章主要介紹了vue項目中swiper輪播active圖片實現(xiàn)居中并放大方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05