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

  • 跟傳統的頁面能夠在每一個頁面分別設置填寫對應的頁面title,but,vue是單頁面應用項目,想設置頁面對應的title就不能跟傳統方式同樣了。
  • 首先,找到以前配置好的路由文件,在對應頁面路由中添加以下配置便可:
    meta: {vue

    title: '我是頁面title'
     }
  • 而後再main.js中的路由鉤子函數router.beforeEach添加緩存

    if (to.meta.title) {函數

    document.title = to.meta.title
     }

    說到路由添加meta配置,還有一個比較經常使用的是keepAlive,它能夠設置頁面是否緩存,具體以下:
    meta: {spa

    keepAlive: true
     }

    而後設置.vue文件的router-view
    <keep-alive>nuxt

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

    </keep-alive>
    /啓用頁面緩存/
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    /頁面不緩存/code

  • 回到設置頁面title的話題
    可是最近作過一個項目是基於vue的nuxt.js,路由是根據項目目錄結構自動生成的,按以前的方法又行不通了,通過探索發現,nuxt.js項目設置title也不難,只需在對應的.vue文件添加
    圖片描述

便可router

相關文章
相關標籤/搜索