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切换
效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-ui和vue表单(对话框)验证提示语(残留)清除操作
这篇文章主要介绍了element-ui和vue表单(对话框)验证提示语(残留)清除操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了element-ui动态限定的日期范围选择器代码片段，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了三种使用icon的方案，分别是element-icon、svg-icon、@iconify/vue，三种方案通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue2与Vue3的数据绑定原理及实现，数据绑定是一种把用户界面元素的属性绑定到特定对象上面并使其同步的机制，使开发人员免于编写同步视图模型和视图的逻辑2022-09-09
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
应用会对用户的操作进行反馈，就叫响应式，数据变化会实时改变UI，就叫数据响应式，修改Vue实例中的数据时，视图会重新渲染，就是Vue的数据响应式2022-05-05
这篇文章主要介绍了vue中如何去掉空格的方法实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
今天小编就为大家分享一篇关于highCharts提示框中显示当前时间的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家介绍了表格Table实现前端全选所有功能,包括非当前页的方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2024-02-02
在Vue3中使用环境变量的方式与Vue2基本相同,下面这篇文章主要给大家介绍了关于vue项目index.html中使用环境变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
最新评论