使用插件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>