vue3使用‘vue-wechat-title’设置统一路由标题

1. 安装相关依赖

npm install vue-wechat-title --save

2. 在main.ts引入和使用

import {
    
     createApp } from 'vue'
import App from './App.vue'
import VuewechatTitle from 'vue-wechat-title' 
 
const createapp = createApp(App)
createapp.use(VuewechatTitle)

3. 在App.vue当中使用，设置统一的路由标题

<template>
  <div>
    <router-view v-wechat-title="Title"/>
    <footer class="hu_footer" v-show="this.$route.meta.show">
      <Footers />
  </footer>
  </div>
</template>

<script>
import {
      
       ref, defineComponent } from "vue";
import {
      
      getccconfig} from '@/api/index';
import Footers from "./views/layout/foooter.vue";
export default {
      
      
  mounted(){
      
      
    this.System_information();
  },
  setup(){
      
      
      let Title=ref('');
      const System_information=()=>{
      
      
          let query={
      
      
              info:'title'
          };
          getccconfig(query).then((res) => {
      
      
              let d=res.data.mydata;
              Title.value=eval('(' + d + ')').title;
              console.log(Title.value)
          }).catch((err) => {
      
      
              console.log(err)
          });
      }
      return{
      
      
          System_information,
          Title
      }
  },
  components:{
      
      
      Footers,
  }
}
</script>

如果屏幕前的你觉得这篇文章对你有帮助，欢迎点赞、关注、转发、评论。 文章为原创，未接本人同意禁止转载，创造不易，谢谢合作。