vue动态该变title
分类页面title固定值页面title动态获取,类似于博客文章标题固定title//rooter.js{path: '/',name: 'xxx',component: () => import('./components/xxx.vue'),meta: {title: 'xxx'//设置标题}},路由守卫中设置改变标题router.be...
·
博客地址:http://www.globm.top/blog/1/detail/28
分类
- 页面title固定值
- 页面title动态获取,类似于博客文章标题
固定title
//rooter.js
{
path: '/',
name: 'xxx',
component: () => import('./components/xxx.vue'),
meta: {
title: 'xxx' //设置标题
}
},
路由守卫中设置改变标题
router.beforeEach((to, from, next) => {
if (to.matched.length === 0) {
from.name ? next({ name: from.name }) : next({ path: 'error' })
} else {
// 判断路由中是否存在title
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = 'xxx'
}
next()
}
})
动态改变title
安装
npm install vue-wechat-title --save
引入main.js
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
配置路由守卫
router.beforeEach((to, from, next) => {
if (to.matched.length === 0) {
from.name ? next({ name: from.name }) : next({ path: 'error' })
} else {
// 判断路由中是否存在title
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = 'xxx'
}
next()
}
})
页面使用
//页面开始标签加入指令
<template>
<div v-wechat-title="title">
//内容
</div>
</template>
//配置title
<script>
export default {
name: 'ArticleInfo',
data () {
return {
title: '测试',
}
},
created () {
this.title = '改变后的标题'
},
}
</script>
更多推荐
已为社区贡献19条内容
所有评论(0)