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