如何解決vue項目動態設置頁面title及是否緩存頁面的問題

小編給大家分享一下如何解決vue項目動態設置頁面title及是否緩存頁面的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

跟傳統的頁面可以在每個頁面分別設置填寫對應的頁面title,but,vue是單頁面應用項目,想設置頁面對應的title就不能跟傳統方式一樣了。

下載

npm install vue-wechat-title --save

在mian.js中引入

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

在router的index.js的路由中加上參數

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

如果是公共組件，在跳轉時根據條件來動態設置title，可以在最外層的div上設置v-wechat-title="$route.meta.title"再動態去改變title即可

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


//js動態設置,即可在跳轉頁面時根據條件改變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，路由是根據項目目錄結構自動生成的，按之前的方法又行不通了，經過探索發現，nuxt.js項目設置title也不難，只需在對應的.vue文件添加

以上是“如何解決vue項目動態設置頁面title及是否緩存頁面的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！