vue項(xiàng)目動(dòng)態(tài)設(shè)置頁(yè)面title及是否緩存頁(yè)面的問(wèn)題

更新時(shí)間：2018年11月08日 11:49:32 作者：barry_mr_楊

這篇文章主要介紹了vue項(xiàng)目動(dòng)態(tài)設(shè)置頁(yè)面title及是否緩存頁(yè)面的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

跟傳統(tǒng)的頁(yè)面可以在每個(gè)頁(yè)面分別設(shè)置填寫對(duì)應(yīng)的頁(yè)面title,but,vue是單頁(yè)面應(yīng)用項(xiàng)目,想設(shè)置頁(yè)面對(duì)應(yīng)的title就不能跟傳統(tǒng)方式一樣了。

下載

npm install vue-wechat-title --save

在mian.js中引入

//設(shè)置title
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

在router的index.js的路由中加上參數(shù)

 {
  path: '/login',
  component: Login,
  meta: {
  title: '登錄'
  }
 }

如果是公共組件，在跳轉(zhuǎn)時(shí)根據(jù)條件來(lái)動(dòng)態(tài)設(shè)置title，可以在最外層的div上設(shè)置v-wechat-title="$route.meta.title"再動(dòng)態(tài)去改變title即可

<template>
 <div class="hours-con container" v-wechat-title="$route.meta.title">
   .....
 </div>
</template>


//js動(dòng)態(tài)設(shè)置,即可在跳轉(zhuǎn)頁(yè)面時(shí)根據(jù)條件改變title了
if(zong){
 this.$route.meta.title = '總課時(shí)'

說(shuō)到路由添加meta配置，還有一個(gè)比較常用的是keepAlive，它可以設(shè)置頁(yè)面是否緩存，具體如下：

meta: {

 keepAlive: true
 }

然后設(shè)置.vue文件的router-view

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

/啟用頁(yè)面緩存/

<router-view v-if="!$route.meta.keepAlive"></router-view>

/頁(yè)面不緩存/

回到設(shè)置頁(yè)面title的話題

但是最近做過(guò)一個(gè)項(xiàng)目是基于vue的nuxt.js，路由是根據(jù)項(xiàng)目目錄結(jié)構(gòu)自動(dòng)生成的，按之前的方法又行不通了，經(jīng)過(guò)探索發(fā)現(xiàn)，nuxt.js項(xiàng)目設(shè)置title也不難，只需在對(duì)應(yīng)的.vue文件添加

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

您可能感興趣的文章:

相關(guān)文章

vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue3使用TypeIt實(shí)現(xiàn)文字打字機(jī)效果的代碼示例
在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中,文字打字機(jī)效果是一種非常流行的動(dòng)畫效果,能夠吸引用戶的注意力并提升用戶體驗(yàn),本文將介紹如何在 Vue 3 中使用 TypeIt 庫(kù)實(shí)現(xiàn)文字打字機(jī)效果,并分享一些實(shí)用的技巧和示例,需要的朋友可以參考下
2025-01-01
NUXT SSR初級(jí)入門筆記(小結(jié))
這篇文章主要介紹了NUXT SSR初級(jí)入門筆記(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
一文詳解Vue如何整合Echarts實(shí)現(xiàn)可視化界面
ECharts，縮寫來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。本文將在Vue中整合Echarts實(shí)現(xiàn)可視化界面，感興趣的可以了解一下
2022-04-04
前端JS也可以連點(diǎn)成線詳解(Vue中運(yùn)用AntVG6)
這篇文章主要給大家介紹了關(guān)于前端JS連點(diǎn)成線(Vue中運(yùn)用?AntVG6)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01
Vue中添加過(guò)渡效果的方法
本篇文章主要介紹了Vue中添加過(guò)渡效果的方法，Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果，有興趣的同學(xué)可以了解一下。
2017-03-03
VUE項(xiàng)目中引入JS文件的方法總結(jié)
在vue中如果把所有的代碼都寫到一個(gè)頁(yè)面中,有時(shí)比較難找,顯得比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目中引入JS文件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue中的模態(tài)對(duì)話框組件實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了vue中的模態(tài)對(duì)話框組件實(shí)現(xiàn)過(guò)程,通過(guò)template定義組件，并添加相應(yīng)的對(duì)話框樣式，需要的朋友可以參考下
2018-05-05
使用Vue3封裝一個(gè)通用echarts組件詳解
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02