Vue-router跳转界面后显示空白，要刷新之后才会显示新页面，地址栏也跳转了（已解决）

最新推荐文章于 2025-05-12 14:50:58 发布
最新推荐文章于 2025-05-12 14:50:58 发布
阅读量5.1k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Rick_and_mode/article/details/109360529
本文介绍了解决Vue路由跳转不准确的问题。通过为路由添加name属性来确保跳转地址的唯一性，并利用Vue路由名称匹配机制实现精确跳转。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原来的错误的
在这里插入图片描述
解决方案
跳转的时候加上name属性
因为vue 路由名称可以进行匹配
这样绑定后 是唯一的跳转地址
在这里插入图片描述

Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
全干攻城狮
05-18 1万+
背景 最近项目过程中出现了一个奇怪的问题，当用户登入系统后部分路由首次跳转时会出现空白页面，但是在该页面上刷新又可以正常显示路由对应的页面。 系统内包含用户、角色、菜单等管理模块，前端使用了动态路由 问题复现 系统内有两个角色，A1和A2 A1角色包含P1、P2、P3页面的权限 A2角色包含P1、P2、P3、P4、P5页面的权限 当首次使用A1角色对应的用户登入系统时，侧边栏所有菜单都可以正常访问 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统，其中P1、P2、P3菜单对应的页面可以正常访问，
Vuerouter跳转界面后空白，要刷新之后才会显示
qq_44743216的博客
07-20 6094
Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
Vue 登录进来第一次进入路由空白页，刷新页面才好
weixin_44019706的博客
01-10 2695
方法一： 点登录，后端返回成功后，用window.location.href="/" ，不要用router.push 方法二： 在退出登录的时候，执行 location.reload();
多入口解决vue-router跳转空白新页面需求
最新发布
kilokn的博客
05-12 554
在Vue.js应用开发中，通常会在App.vue中放置全局公共组件，但某些特殊页面（如登录页、广告落地页）可能需要完全空白，不受这些组件影响。虽然可以通过路径判断控制组件的显示，但当有多个空白页面需求时，这种方法会变得繁琐。为此，可以使用多入口（Multi-Entry）构建独立的空白页面。多入口允许在一个前端工程中配置多个独立的HTML和JS入口文件，使不同页面拥有完全独立的Vue实例、路由和样式。通过修改Webpack或Vite的构建配置，可以创建独立的空白页入口，并配置相应的HTML、Vue入口文件和组
Vue路由首次跳转加载不出某个组件或显示空白，刷新一次才可显示（遇到的坑）
a1071626267的博客
09-08 5165
Vue路由首次跳转加载不出footer组件，刷新一次才可显示（遇到的坑）
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示（已解决）
JHGYLD7的博客
07-30 3643
原链接：(23条消息) vue 路由跳转页面不刷新_vue路由跳转页面不刷新_咬着拽天下的程序猿的博客-优快云博客困扰我整整一天的问题就这么解决了，谢谢
解决vue+router路由跳转不起作用的一项原因
11-20
但启用`history`模式会带来一个新的挑战：当用户直接在浏览器地址栏输入或通过书签访问非根路径时，服务器需要正确地处理这些请求，否则会返回404错误。 这是因为`history`模式下，浏览器会尝试从服务器获取实际...
解决vue router组件状态刷新消失的问题
12-09
在开发基于Vue.js的单页应用（SPA）时，经常遇到的一个问题是，用户登录后通过Vue Router跳转到主页面，但当用户刷新页面时，登录状态和相关信息丢失。这是因为浏览器刷新页面时，路由参数、Vuex状态等不会被保留。...
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
10-14
跳转到`/index`后，如果对应的组件没有正确加载，页面也可能显示为空白。检查组件是否已导入，以及是否正确地在路由配置中声明。 6. **URL锚点冲突**： 在HTML中，`#`通常用于锚点定位。如果浏览器解析URL时认为`...
vue-router的两种模式的区别
10-16
这两个API允许我们修改浏览器地址栏的URL而不会导致页面重新加载。使用这两个API，Vue-router可以更优雅地管理路由状态。pushState可以在历史记录中添加一条新的记录，而replaceState则可以替换当前的历史记录。它们...
Vue路由首次跳转白屏，刷新一次才可显示页面！！解决
Hello_word_2
07-12 6373
问题：路由首次跳转某一页面白屏，刷新一次才可显示页面。 1. 检查路由跳转到此页面的路径是否正确，有没有空格。 本人跳转此页面路由： this.$router.push({path:'/loanTrial '}) 改为 this.$router.push({path:'/loanTrial'}) 问题解决，不再白屏。 ...
VUE 跳转至某一页面后 再跳转至其他页面出现空白 刷新后正常显示的问题解决
weixin_55296581的博客
01-31 2818
VUE 跳转至某一页面后 再跳转至其他页面出现空白
线上bug!! Vue路由首次跳转白屏，刷新一次才可正确显示页面！！
weixin_41086056的博客
06-22 2775
线上bug记录，vue路由跳转白屏问题
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示
飞舞花下
11-03 2528
在项目搜<router-view，然后加上:key="$route.fullPath"，防止同路由页面不刷新。
【Vue自学记】解决：登录后router跳转到首页显示空白，刷新后正常
gcc921732678的博客
04-19 1497
window.location.href="/home" ，不要用this.$router.push("/home")2、在首页home.vue的created函数里面加个刷新location.reload()
vue中的路由跳转了，url改变，但是页面为空白，没有到达指定文件
热门推荐
m0_47265814的博客
05-25 2万+
问题描述： 初始路径 跳转之后： 然后当前页面全白了，到了一个空页面 如果输入一个没有对应文件的url时也会出现这种情况，比如： 我的目录下并没有mycollect文件 我的路由书写过程： 1.在router下的index.js中声明路由 const myinterest = () => import('@/my/myinterest') 2.还在该文件下注册路由 { // 这是链接上的显示路径 path: '/myinterest', componen
this.$router.push方法地址跳转了但页面加载有问题，重新刷新才有用的问题
qq_44774831的博客
04-29 3544
this.$router.push问题分析解决后续 问题 页面问题： 后台报错： 分析 查了一些资料发现：是使用了keep-alive对组件进行了缓存，而后改用actived生命周期函数，依旧是无效，这大概率是因为当初为了做面包屑导航，使用了嵌套路由的结构：一个路由里面嵌套了Children属性 结果就是现在导致返回上一级路由时，不触发actived生命周期函数了。 解决 当前页面不使用不使用缓存，并且给router-view加上key 可以在app.vue里面的<template添加下面的代码
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
weixin_45288172的博客
02-01 5627
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
Vue-router深入解析：路由机制与开发实践技巧
Vue-router是Vue.js官方的路由管理器，用于构建单页面应用（SPA）。首先介绍动态组件和keep-alive组件的概念，动态组件用于在多个组件间切换，而keep-alive可以缓存组件状态，减少重新渲染。文章接着对前后端渲染、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值