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-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了vue实现鼠标滑动展示tab栏切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue中使用echarts的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue 按需引入vant跟全局引入方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue项目配置同一局域网可使用ip访问的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章主要介绍了详解Vue应用部署到服务器的正确方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
这篇文章主要介绍了如何使用ant-design-vue的Table组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
我们知道每一个vue项目应用都是通过vue的构造函数进行创建一个新的vue项目的。创建vue实例的配置对象，可以包括一下属性选项，比如：data、methods、watch、template等等，每一个选项都有不同的功能，大家可以根据自己的需求选择不同的配置2022-08-08
这篇文章主要介绍了vue3中的hook简单封装，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论