vuejs怎麼設定title

vuejs設定title的方法：1、透過npm install安裝「vue-wechat-title」；2、在main.js中引入「vue-wechat-title」；3、在index.js中給每個路由添加title即可。

本文操作環境：windows7系統、Vue2.9.6版、Dell G3電腦。

vuejs怎麼設定title？

vue單一頁面標題設定title

前端框架如
Vue、React
等都是單一頁面的應用，整個web網站其實是一個index頁面，頁面跳轉都是替換index.html裡邊的內容。這與傳統的每個頁面設定title標籤的做法不一樣。

推薦使用vue-wechat-title

vue-wechat-title作用

Vuejs 單頁應用在iOS系統下部分APP的webview中標題不能通過document.title = xxx 的方式修改該外掛只為解決該問題而生(兼容安卓)

已測試APP 微信

QQ

支付寶 淘寶安裝

npm install vue-wechat-title --save

用法

1，在main.js 中引入

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

2，在路由檔案

index.js

中為每個路由新增

title

// 挂载路由const router =  new Router({
   mode: 'history',
   routes:[
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
            title: '首页'   // 标题设置
          }
        },
        {
          path: '/lists',
          name: 'Lists',
          component: Lists,
          meta: {
            title: '列表'  // 标题设置
          }
        }
     ]
});

3，在app.vue

中修改router-view 元件###

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

###自訂載入的圖片位址預設是./favicon.ico 可以是相對或絕對的###

<p v-wechat-title="$route.meta.title" img-set="/static/logo.png"></p>

###ok ！重啟看看######推薦學習：《###vue教學###》##########

以上是vuejs怎麼設定title的詳細內容。更多資訊請關注PHP中文網其他相關文章！