目录1. 在router/index.js中2.在main.js中设置路由守卫具体操作如下同上在 router/index.js 中在项目的根目录下在main.js中引入并且使用该插
使用meta属性的title设置好每个路由对应的title值
routes: [
{
path: '/',
component: () => import('../login'),
name: 'login',
meta: {
title: '用户登录'
}
},
//.............
]
vue页面切换时,网页title随之切换
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
按照常规步骤设置好路由的title,vue页面切换时,也确实实现了title的变化,但是我发现刷新页面之后title失效了!!!!
百度之后,发现很多人用 ‘ vue-wechat-title ’ 插件来设置title,尝试了一下,确实解决了我的问题
使用meta属性的title设置好每个路由对应的title值
打开命令行,通过npm install vue-wechat-title --save来安装该插件:(有一些编辑器自带Terminal命令行操作台,比如我用的WEBStORM,可根据个人情况操作。)
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
在 router-view 标签上添加 v-wechat-title='$route.meta.title' :
<template>
<div id="app">
<router-view v-wechat-title='$route.meta.title'/>
</div>
</template>
自此,问题解决,以此给自己做个记录。
不知道别的小伙伴有没有遇到像我一样的问题,刷新页面之后title失效了,我百度了一下好像没有相关词条,如果有小伙伴遇到了跟我一样的问题,希望也能帮助到你。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue设置路由title,但刷新页面时title失效的解决
本文链接: https://www.lsjlt.com/news/152292.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0