解決vue單頁面應(yīng)用中動態(tài)修改title問題
詳細信息查看:vue-weachat-title
解決問題:
1、Vuejs 單頁應(yīng)用在iOS系統(tǒng)下部分APP的webview中 標題不能通過 document.title = xxx 的方式修改 該插件只為解決該問題而生(兼容安卓)
2、在vue單頁面中,通過瀏覽器分享到QQ、微信等應(yīng)用中的鏈接,只有一個首頁標題和默認icon圖片
已測試:APP 微信 QQ 支付寶 淘寶
安裝
npm install vue-wechat-title --save
用法
1、在main.js中引入
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
2、在路由文件 index.js 中給需要的路由添加 title
routes: [{ path: '/', name: 'JmCon', component: JmCon, meta:{ keepAlive: true } }, { path: '/detail', name: 'TopicDetail', component: TopicDetail, meta:{ title: '著迷網(wǎng)話題詳情頁', keepAlive: false } } ]
3、在 app.vue 中修改 router-view 組件
在各個組件中隨便一個標簽中都可寫入
<div v-wechat-title="$route.meta.title"></div>
或者
<router-view v-wechat-title='$route.meta.title'></router-view>
若想要動態(tài)改變title值:
<div v-wechat-title="$route.meta.title={data.title}"></div>
自定義加載的圖片地址 默認是 ./favicon.ico 可以是相對或者絕對的
<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
匯總:
在詳情頁中使用,根據(jù)不同的文章內(nèi)容,分享出去的文章標題和圖片都不同
<div class="topicdetail" v-wechat-title="$route.meta.title=topicinfo.subject" img-set="top
總結(jié)
以上所述是小編給大家介紹的解決vue單頁面應(yīng)用中動態(tài)修改title問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
淺談Vue內(nèi)置component組件的應(yīng)用場景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場景,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03在vue項目中使用element-ui的Upload上傳組件的示例
本篇文章主要介紹了在vue項目中使用element-ui的Upload上傳組件的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02Element-ui 自帶的兩種遠程搜索(模糊查詢)用法講解
這篇文章主要介紹了Element-ui 自帶的兩種遠程搜索(模糊查詢)用法講解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-01-01