Vue3.x如何设置浏览器动态Title方法

更新时间：2024年03月08日 11:06:48 作者：小破孩呦

这篇文章主要介绍了Vue3.x如何设置浏览器动态Title方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用插件vue-wechat-title来实现

（我是刚升级的vue3.x，在安装插件的时候遇到了各种问题，后来发现可能是因为的我node版本太低了，然后就去升级了一下，就好了）

Node版本要求：

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

1、安装插件

npm install vue-wechat-title --save

2、在main.js中引用

import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)

3、在router文件夹下的index.js中增加

如下：

const routes = [
    {
        path: '/',
        name: 'Home',
        meta: {
            title: '首页'
        },
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        meta: {
            title: '关于'
        }
    }
]

4、在app.vue 中添加指令 v-wechat-title

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

通过以上步骤即可实现浏览器动态Title切换

效果如下：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue预览 pdf、word、xls、ppt、txt文件的实现方法
这篇文章主要介绍了vue预览 pdf、word、xls、ppt、txt文件的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue 理解之白话 getter/setter详解
这篇文章主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
浅谈Vue响应式(数组变异方法)
这篇文章主要介绍了浅谈Vue响应式(数组变异方法)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue之Element-Ui输入框显示与隐藏方式
这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
ant desing vue table 实现可伸缩列的完整例子
最近在使用ant-design-vue做表格时，遇到要做一个可伸缩列表格的需求，在网上一直没有找到好的方法，于是小编动手自己写个可以此功能，下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考
2021-05-05
vue之el-form表单校验以及常用正则详解
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue组件文档生成备注详解
这篇文章主要介绍了vue组件文档生成备注详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue2如何监听数组的变化
这篇文章主要来和大家详细探讨一下Vue2中是如何监听数组的变化的,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
Vue底层实现原理总结
小编给大家整理Vue底层实现原理的知识点总结，如果大家对此有需要，可以学习参考下，希望我们整理的内容能够帮助到你。
2018-02-02
Vue中Video标签播放解析后短视频去水印无响应解决
这篇文章主要为大家介绍了Vue中使用Video标签播放＜解析后的短视频＞去水印视频无响应的解决方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04