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 '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>