vue设置路由title,但刷新页面时title失效的解决
更新时间：2022年06月22日 14:22:14 作者：Jacy_Lee_LDF
这篇文章主要介绍了vue设置路由title，但刷新页面时title失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
1. 在router/index.js中
使用meta属性的title设置好每个路由对应的title值
/* router/index.js: */
routes: [
{
path: '/',
component: () => import('../login'),
name: 'login',
meta: {
title: '用户登录'
}
},
//.............
]2.在main.js中设置路由守卫
vue页面切换时，网页title随之切换
/* main.js: */
/*路由守卫*/
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})按照常规步骤设置好路由的title，vue页面切换时，也确实实现了title的变化，但是我发现刷新页面之后title失效了！！！！
百度之后，发现很多人用 ‘ vue-wechat-title ’ 插件来设置title，尝试了一下，确实解决了我的问题
具体操作如下
同上在 router/index.js 中
使用meta属性的title设置好每个路由对应的title值
在项目的根目录下
打开命令行，通过npm install vue-wechat-title --save来安装该插件：（有一些编辑器自带Terminal命令行操作台，比如我用的WebStorm，可根据个人情况操作。）
在main.js中引入并且使用该插件
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
修改App.vue的路由标签
在 router-view 标签上添加 v-wechat-title='$route.meta.title' ：
<template> <div id="app"> <router-view v-wechat-title='$route.meta.title'/> </div> </template>
自此，问题解决，以此给自己做个记录。
不知道别的小伙伴有没有遇到像我一样的问题，刷新页面之后title失效了，我百度了一下好像没有相关词条，如果有小伙伴遇到了跟我一样的问题，希望也能帮助到你。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了 Vue 登录功能实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
这篇文章主要介绍了vue.js 2.*项目环境搭建、运行、打包发布的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,这篇文章主要给大家介绍了关于Vue3的10种组件通信方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了前端token中4个存储位置的优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
这篇文章主要介绍了你不知道的Vue技巧之--开发一个可以通过方法调用的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue项目中axios请求网络接口封装的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧2024-02-02
最新评论