vue设置路由title,但刷新页面时title失效的解决
作者：Jacy_Lee_LDF 发布时间：2024-04-27 15:52:10
标签：vue,路由,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失效了，我百度了一下好像没有相关词条，如果有小伙伴遇到了跟我一样的问题，希望也能帮助到你。
来源：https://blog.csdn.net/Jacy_Lee_LDF/article/details/107900676
0
投稿猜你喜欢
今天谈一下关于python中input的一些基本用法（写给新手入门之用，故只谈比较实用的部分）。首先，我们可以看一下官方文档给我们的解释（在- Turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0,0)位置开始，它
- 一、前言进程，一个新鲜的字眼，可能有些人并不了解，它是系统某个运行程序的载体，这个程序可以有单个或者多个进程，一般来说，进程是通过系统CPU
- 本文为大家分享了mysql 5.7.16 免安装版本教程，供大家参考，具体内容如下MySQL: 5.7.16 程序目
- 本文结合OpenCV官方样例，对官方样例中的代码进行修改，使其能够正常运行，并对自己采集的数据进行实验和讲解。一、准备OpenCV使用棋盘格
- 这种方案是通过对代码进行加密，然后利用C语音写解密的PHP扩展。破解难度会有提升，但依然是会被破解的。 从网上找过各种代码加密的开源方案。
- 首先辨析一下概念：1. loss是整体网络进行优化的目标， 是需要参与到优化运算，更新权值W的过程的2. metric只是作为评价网络表现的
- pycharm确实要比Spyder功能全面，但是anaconda的环境配置实在太方便了，所以想take both，其实很简单，利用pycha
- 由于工作需要在一大堆日志里面提取相应的一些固定字符，如果单纯靠手工取提取，数据量大，劳心劳力，于是自然而然想到了用Python做一个对应的提
- python画桃心表白python用turtle画简单图案比较方便，大一学python的turtle模块时，记得要画各种图案，如国旗，桃心等
- 微信小程序官方给了十分详细的登陆时序图，当然为了安全着想，应该加上签名加密。微信小程序端1).调用wx.login获取 code 。 2).
- 以上述图片举例，要求 相对 的顺时针夹角。注意：这里使用图像坐标系1 定义求顺时针角度的函数 import numpy as npdef
- 我们在建立一个大型网站的时候，往往会包括很多相同的页面框架模式，甚至一些细节元素都是相同的。但令人困扰
- 在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Fire
- 前言相信做自动化测试的同学一定不可忽视的问题就是验证码，他几乎是一个网站登录的标配，当然，我一般是不建议在这上面浪费时间去做识别的。举个例子
- 问题：cudatoolkit cudnn 通过conda 虚拟环境安装，先前已经使用virtualenv安装tf，需要在conda虚拟环境中
- 安装 Tesseract OCRTesseract OCR 是一款由 Google 团队开发的开源 OCR（Optical Characte
- 再之前同时安装 python 后 只需把环境变量PATH 里面改为PATH=C:\Python36-32\Scripts\;C:\Pytho
- 先使用 Ms Access 压缩修复，然后再去相关的表把备注类型的字段里的“索引”去掉 备注型字段为什么不能超过1950字节？是由于备注型字
- 本文实例讲述了Python装饰器用法。分享给大家供大家参考，具体如下：用类作为装饰器示例一最初代码：class bol(object): d
