vue 修改标题栏_VUE动态修改titile的三种方法
第一種：適用于在已經定義好title的情況下，例如首頁，關于頁等等
1.1 main.js
const defaultTitle = '默認 title'router.beforeEach((to, from, next)=>{
document.title= to.meta.title ?to.meta.title : defaultTitle
next()
})
1.2 index.js
routes: [
{
name:'home',
path:'/home/:openname',
component: Home,
meta: {
title:'首頁'}
}
]
第二種：vue-meta 插件(適用于無法固定title的情況下，例如文章頁)
2.1 安裝
npm install vue-meta --save
2.2?在main.js引入
import Meta from 'vue-meta'Vue.use(Meta)
2.3?為需要修改的頁面單獨定義metaInfo
export default{
metaInfo: {
title:'This is the test',
meta: [
{ charset:'utf-8'},
{ name:'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes'}
]
}
}
2.4?異步請求數據可以使用
如果component中使用了異步請求數據，可以使用?metaInfo()?方法。
{{{ title }}}
name:'post',
data () {return{
title:''description:'這是一篇文章...'}
},
metaInfo () {return{
title:this.title,
meta: [
{ vmid:'description', name: 'description', content: this.description }
]
}
},
created () {this.initData()
},
methods: {
initData () {
axios.get('some/url').then((resp) =>{//設置title時 metaInfo 會同時更新
this.title =resp.titlethis.description =resp.decription
})
}
}
}
第三種：vue-wechat-title
3.1 安裝
npm install vue-wechat-title --save
3.2?在main.js中引入
import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)
3.3 使用
在router>index.js中添加meta對象配置title
const router = new Router({
routes: [
...
{
path: "/gameDesc",
name: 'gameDesc',
component: resolve => import('@/pages/Game/gameDesc'),
meta:{
title: '游戲說明'
}
},
{
path: "/integralList",
name: 'integralList',
component: resolve => import('@/pages/Game/integralList'),
meta:{
title: '積分收取記錄'
}
}
...
]
});
router.afterEach(route => {
// 從路由的元信息中獲取 title 屬性
if (route.meta.title) {
document.title = route.meta.title;
// 如果是 iOS 設備，則使用如下 hack 的寫法實現頁面標題的更新
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
const hackIframe = document.createElement('iframe');
hackIframe.style.display = 'none';
hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
document.body.appendChild(hackIframe);
setTimeout(_ => {
document.body.removeChild(hackIframe)
}, 300)
}
}
});
export default router;
在App.vue中修改router-view
總結
以上是生活随笔為你收集整理的vue 修改标题栏_VUE动态修改titile的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java cms bootstrap_t
- 下一篇： oracle实验六杨艳华_oracle实