vue动态设置页面title方法-vue-wechat-title包的使用 & 修改初始化时的title和图标
vue动态设置页面title方法-vue-wechat-title包的使用 &修改初始化时的title和图标1、vue动态设置页面title方法-vue-wechat-title包的使用图例下载npm install vue-wechat-title --save或cnpm i vue-wechat-title在mian.js中引入import VueWechatTitle from 'v
·
vue动态设置页面title方法-vue-wechat-title包的使用 & 修改初始化时的title和图标
1、vue动态设置页面title方法-vue-wechat-title包的使用
图例
下载
npm install vue-wechat-title --save
或
cnpm i vue-wechat-title
在mian.js中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
路由配置中设置meta:{ title : title名 }
{
path: '/common',
name: 'common',
component: () => import('@/views/problem/common'),
meta: {
title: '改title'
}
},
在App.vue文件中使用
<div v-wechat-title="$route.meta.title">
或
<router-view v-wechat-title="$route.meta.title"></router-view>
注:
此插件只改变title的值
实战
在vue单页面中进行引用
<div class="container" v-wechat-title="title">
data中可自定义一个固定的
data(){
return{
title: '固定title',
}
}
methods中动态修改
methods:{
// get请求 get('地址','{params:数据}')
async getDeta() {
let res = await this.$http.get('/FAQ/detail', {
id: this.$route.query.id,
})
const { result } = res
this.detaList = result
//写法一 直接写 全局改-直接返回能恢复原有
this.title = this.detaList.title + '-页面所属分类'
//写法二 条件判断 全局改-直接返回能恢复原有
if (this.detaList.title == '你真帅?') {
this.title = this.detaList.title + '-页面所属分类'
} else {
this.title = '好漂亮'
}
if (res.code != 200) {
this.$router.push('/404')
} else {
this.detaList = res.result
}
},
}
2、修改初始化时的title和图标
在src同层级的publice文件夹下有
1、换个32px*32px的新图标
2、把index.html中自带的文件进行修改
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
改为
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>新title</title>
更多推荐
已为社区贡献72条内容
所有评论(0)