淺談vue2 單頁(yè)面如何設(shè)置網(wǎng)頁(yè)title
更新時(shí)間：2017年11月08日 16:57:27 作者：魔幻冰揚(yáng)
這篇文章主要介紹了淺談vue2 單頁(yè)面如何設(shè)置網(wǎng)頁(yè)title,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
前端框架如Vue、React等都是單頁(yè)面的應(yīng)用，也就是說整個(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實(shí)現(xiàn)分頁(yè)組件的示例代碼
分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁(yè)組件,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue3.0組合式api的使用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了Vue中的全局指令防止按鈕重復(fù)點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3中頁(yè)面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式
在Vue3中Vue?Router是一個(gè)常用的路由管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)和導(dǎo)航,這篇文章主要給大家介紹了關(guān)于vue3中頁(yè)面跳轉(zhuǎn)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2024-09-09
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來(lái)獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下2023-07-07
vue的axios請(qǐng)求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請(qǐng)求改變content-type為form-data問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁(yè)的截圖功能?(html2canvas)
這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁(yè)的截圖功能?(html2canvas)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue2?element-ui?el-checkbox視圖不更新問題及解決
作者在開發(fā)過程中遇到了視圖不更新的問題,最終通過改變一個(gè)無(wú)關(guān)緊要的響應(yīng)式數(shù)據(jù)來(lái)解決,讓視圖發(fā)生改變2024-12-12