vue3-ts 修改Title的一种方式

使用插件vue-wechat-title，设置浏览器动态标题的步骤：

1、安装vue-wechat-title

npm install vue-wechat-title --save

2、main.ts引入插件

import VueWechatTitle from 'vue-wechat-title' 
Vue.use(VueWechatTitle);

此引入时，可能 import VueWechatTitle from 'vue-wechat-title' 

       在这里可能会报错，没关系，这里是ts不认识这个类型，需要做一个类型说明文件。

在文件夹根目录下面添加一个新文件，叫

vue-wechat-title.d.ts

然后写入声明：

declare module 'vue-wechat-title'{
    const VueWechatTitle :any;
    export default VueWechatTitle;
}

 此就是告诉ts认识这个文件。完后错误解决。

3、在router中的index.ts路由下设置mate属性

4、APP.vue使用vue-wechat-title插件 

<router-view v-wechat-title="$route.meta.title" />

补充说明：

在使用时，在一种情况下，这种方式会失效：

比如：在我跳转到我的 test.vue 时，title 应该显示为 测试 ，但是失效了，写法如下：

<template>
   <div>
    内容模板元素1
   </div>
   <div>
    内容模板元素2
   </div>
</template>

在 <template> 元素中，第一层级有两个或以上的<div>标签，则title失效。

解决方法：在 <template> 元素中，第一级只存在一个<div>标签即可。

<template>
  <div>
     <div>
      内容模板元素1
     </div>
     <div>
      内容模板元素2
     </div>
   </div>
</template>