vue项目中路由跳转url路径正确，但是需要手动刷新页面才会变化

最新推荐文章于 2024-05-27 14:44:52 发布
最新推荐文章于 2024-05-27 14:44:52 发布
阅读量760 收藏 6
点赞数 7
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45682998/article/details/135956374
版权

问题

最近做一个vue3+ts+element plus项目，遇到了凡是用到了router.push的地方，路由跳转url路径正确，但是需要手动刷新页面才会变化。

原因


在这里插入图片描
项目用的是SSR，所以应该用将element plus组件包裹。

解决方法

在这里插入图片描述

vue路由篇
weixin_68658847的博客
03-03 1576
vue路由篇
vue笔记详解
weixin_51261234的博客
12-01 5590
vue 文章目录vue第一篇：邂逅vue为什么学习Vuejs？简单的认识一下Vue.jsVue.js安装Vue的初体验Vue中的MVVM创建Vue实例传入的optionsVue的生命周期第二篇：基础语法插值操作1.Mustache2.v-once3.v-html4.v-text5.v-pre6.v-clock绑定属性：1.v-bind介绍和使用v-bind基础v-bind绑定class绑定方式：对象语法绑定方式：数组语法v-bind绑定style绑定方式一：对象语法绑定方式二：数组语法计算属性1.什么是计算
解决vue路由跳转页面需要手动刷新才能渲染页面的问题
m0_69853343的博客
08-30 2206
问题：从登录页面跳转到首页，页面不会刷新，退出按钮不会出现，需要手动刷新才会出现。解决方法在需要刷新的页面里面添加。
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示
飞舞花下
11-03 2425
在项目搜<router-view，然后加上:key="$route.fullPath"，防止同路由页面不刷新。
vue-router 路由嵌套显示不出来_搞懂VueRouter，看这篇文章就够了
weixin_39622628的博客
11-20 2166
关注Vue社区，回复“加群”加入我们一起学习，天天进步风不识途juejin.im/post/6857124868359061512Vue-Router认识路由1.什么是路由2.后端路由阶段3.前端路由阶段前端路由的规则1.URL的hash2.HTML5的history模式Vue-Router基础1.认识vue-router2.安装与使用vue-router3.路由组件详解路由配置其他补...
Vue3项目路由无法跳转和渲染页面
redhat0921的博客
07-02 2196
启动项目后，路由无法跳转渲染，原因为使用cnpm安装vue-router根本就没安装成功，使用 yarn add vue-router@4 -S重新安装后，正常跳转渲染。
vue3 路由切换后，页面不显示内容，刷新后正常显示
最新发布
qq_45469341的博客
05-27 4244
这个白屏问题我是第一次遇到，所以想完整记录一下，本文也借鉴了一下别人的。
关于Vue中路由守卫全方位解析
Teamig的博客
11-28 4072
关于Vue中路由守卫全方位解析 一、定义和理解 导航守卫的作用：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 项目中应用场景举例：路由页面跳转时候进行登陆验证；路由跳转判断； 有多种机会植入路由导航过程中：全局路由, 单个路由独享的, 或者组件级的。 全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解...
vue面试题集合
fhvhdfhfh的博客
01-12 495
vue面试题
Vue面试88题，备战面试金选题库（欢迎补充）
m0_65892856的博客
05-18 1414
VUE简介： vue是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue.js借鉴了angular以及react的一些核心思想，总和各自的长处进行了操作以及性能等方面的优化，vue比angular简单，小，运行速度快，都有数据双向绑定，vue与react都使用virtualDOM虚拟DOM，都是提供了组件的视图组件，都有丰富的插件库，react使用jsx渲染页面，vue使用简单的模板。vue也提供了丰富的指令进行操作，同时也有生命
【Vue】解决路由切换，页面不更新的实用方法
热门推荐
汪小穆的博客
09-22 6万+
前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
vue——router更改路由地址，但是页面不能跳转
yehaocheng520的博客
07-28 9036
在做电商项目时，筛选标签时，需要路由发生变化，但是当前的页面商品列表还需要局部刷新。 如果更改路由后，页面跳转，则是全局刷新，局部刷新才能够满足用户需求。 则此时要做的就是：更改路由地址，但是页面不能跳转。 this.$router.push或者this.$router.replace就是实现路由改变页面跳转的方法： this.$router.push({ path:'index.html', query:{ id:3, tag:18 } }) 如果仅仅是为了让路由发生变化的话，可以将上面中
vue.js中的created()与activated()的用法
qq_57528681的博客
04-26 8522
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。 // 获取列表数据 getTeamTree(val) { this.treeLoading = true; this.$http.position
问题：vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
虎康的博客
04-01 1923
注意：有使用layout封装布局的，是在layout下的主页面中的 router-view 添加标识，不是在src根目录下main.vue中修改（在这个文件修改会造成每次切换路由导航标签都会收起）在项目开发中，有一个页面出现跳转其他页面不显示的问题，但刷新后页面时正常显示的，其他页面跳转该页面是可以展示的问题。在router-view 中给路由添加key标识。
路由跳转第二次点击才能跳转成功
m0_51041905的博客
05-23 2836
1.问题描述 使用路由跳转，第一次点击没反应，第二次点击才跳转成功 this.$router.push('/') window.localStorage.setItem('token', res.access_token) 2.解决方法 这个问题出现的原因是，在页面跳转时先进行跳转然后再把数据存储在本地；(先跳转，再存储) 解决方法：先把数据存储在本地，再进行页面跳转。（先存储，再跳转） window.localStorage.setItem('token', res.access_toke
Vue 在页面中手动刷新后路由前会加上/
X_Flandre的博客
07-21 1660
可以看到,setItem方法中每次存储数据都会转换成JSON格式的字符串 图片: https://uploader.shimo.im/f/AaVR4oum2g6j8Jeo.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2MjY4NDc3NjgsImciOiJXWXB2VDZ0aHdoeVBnS1h2IiwiaWF0Ijo
Vue中路由刷新后设置默认跳转页面（redirect）重定向
T8682828的博客
09-13 2916
Vue中路由刷新后设置默认跳转页面（redirect）重定项
Vue 解决路由跳转页面不刷新的问题
grootbaby
08-19 5018
Vue 解决路由跳转页面不刷新的问题 问题： 通过路由传参跳转界面，页面没有刷新 （或者跳转同一个页面，页面不刷新） （或者 this.$router.replace || this.$router.push 路由跳转不刷新） 解决方法： 在 router-view 中加 :key="$route.fullPath" <router-view v-wechat-title="$route.meta.title" :key="$route.fullPath" v-if="$route.m
vue之this.$router.push页面刷新问题
weixin_47800450的博客
01-04 1万+
跳转当前路由(路由参数有变化)(路由参数无变化此方法无效) 使用this.$router.push进行跳转时，如果是跳转当前路由(路由参数有变化)，可在 App.vue 里的 router-view 标签设置 key 值。或使用监听器 watch <template> <div id="app"> <DataSearch/> <keep-alive :exclude="exclude"> <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值