簡單了解vue2 單頁如何設定網頁title-js教程-PHP中文網

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

小云云

發布： 2017-12-23 10:17:21

原創

2373 人瀏覽過

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

推薦使用vue-wechat-title外掛

下載安裝外掛依賴

npm install vue-wechat-title --save

登入後複製

在main.js中引入外掛程式

import VueWechatTitle from &#39;vue-wechat-title&#39;
Vue.use(VueWechatTitle)

登入後複製

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

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

登入後複製

在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中文網其他相關文章！