vue項目動態(tài)設置頁面title及是否緩存頁面的問題
更新時間：2018年11月08日 11:49:32 作者：barry_mr_楊
這篇文章主要介紹了vue項目動態(tài)設置頁面title及是否緩存頁面的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
跟傳統(tǒng)的頁面可以在每個頁面分別設置填寫對應的頁面title,but,vue是單頁面應用項目,想設置頁面對應的title就不能跟傳統(tǒng)方式一樣了。
下載
npm install vue-wechat-title --save
在mian.js中引入
//設置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
在router的index.js的路由中加上參數(shù)
{
path: '/login',
component: Login,
meta: {
title: '登錄'
}
}
如果是公共組件，在跳轉時根據(jù)條件來動態(tài)設置title，可以在最外層的div上設置v-wechat-title="$route.meta.title"再動態(tài)去改變title即可
<template>
<div class="hours-con container" v-wechat-title="$route.meta.title">
.....
</div>
</template>
//js動態(tài)設置,即可在跳轉頁面時根據(jù)條件改變title了
if(zong){
this.$route.meta.title = '總課時'
說到路由添加meta配置，還有一個比較常用的是keepAlive，它可以設置頁面是否緩存，具體如下：
meta: {
keepAlive: true
}
然后設置.vue文件的router-view
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive>
/啟用頁面緩存/
<router-view v-if="!$route.meta.keepAlive"></router-view>
/頁面不緩存/
回到設置頁面title的話題
但是最近做過一個項目是基于vue的nuxt.js，路由是根據(jù)項目目錄結構自動生成的，按之前的方法又行不通了，經(jīng)過探索發(fā)現(xiàn)，nuxt.js項目設置title也不難，只需在對應的.vue文件添加
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)移動端電子簽名組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了關于vue中的時間格式轉化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3使用TypeIt實現(xiàn)文字打字機效果的代碼示例
在現(xiàn)代網(wǎng)頁設計中,文字打字機效果是一種非常流行的動畫效果,能夠吸引用戶的注意力并提升用戶體驗,本文將介紹如何在 Vue 3 中使用 TypeIt 庫實現(xiàn)文字打字機效果,并分享一些實用的技巧和示例,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了NUXT SSR初級入門筆記(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
一文詳解Vue如何整合Echarts實現(xiàn)可視化界面
ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面，感興趣的可以了解一下2022-04-04
這篇文章主要給大家介紹了關于前端JS連點成線(Vue中運用?AntVG6)的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果，有興趣的同學可以了解一下。2017-03-03
在vue中如果把所有的代碼都寫到一個頁面中,有時比較難找,顯得比較復雜,下面這篇文章主要給大家介紹了關于VUE項目中引入JS文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue中的模態(tài)對話框組件實現(xiàn)過程,通過template定義組件，并添加相應的對話框樣式，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了使用Vue3封裝一個通用echarts組件詳解的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02