簡單了解vue2 單頁如何設定網頁title

前端框架如Vue、React等都是單一頁面的應用，也就是說整個web站點其實都是一個index頁面，所謂的頁面跳轉都是替換index.html裡邊的內容，而頁面的title是在每個頁面初始化的時候才設定一次。對於現在的前端框架，傳統的每個頁面設定title標籤的做法是不行的。本文主要介紹了vue2 單頁如何設定網頁title,小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助到大家。

推薦使用vue-wechat-title外掛

下載安裝外掛依賴

npm install vue-wechat-title --save

在main.js中引入外掛程式

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

在路由檔index.js中為每個路由新增title

##

 routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

在app.vue中修改router-view元件

#

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

重啟試試，可以了

##相關推薦：

詳解失去焦點時網頁Title改變的實現方法

#在html標籤添加圖標，網頁title左邊顯示網頁的logo圖示

JS實作超簡潔網頁title標題跑動閃爍提示效果程式碼_javascript技巧

以上是簡單了解vue2 單頁如何設定網頁title的詳細內容。更多資訊請關注PHP中文網其他相關文章！