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

發布時間: 2019-06-18 18:25:40 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了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及是否緩存頁面的問題
本文地址: http://www.leskzw.tw/wangluo/javascript/244046.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    node版本管理工具n包使用教程詳解angular4筆記系列之內置指令小結
    Top 广东好彩1中奖规则