解决vue路由跳转了但界面不显示问题

最新推荐文章于 2024-05-27 14:44:52 发布
最新推荐文章于 2024-05-27 14:44:52 发布
阅读量1.9w 收藏 4
点赞数 11
分类专栏： vue web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36373873/article/details/96423749
版权

没有在父路由加上router-view，加上下面的代码即可。

<!-- 路由匹配到的组件将显示在这里 -->

<router-view></router-view>

Charis-Cai
关注
  • 11
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4496
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
vue3 路由切换后，页面不显示内容，刷新后正常显示
最新发布
qq_45469341的博客
05-27 1329
这个白屏问题我是第一次遇到，所以想完整记录一下，本文也借鉴了一下别人的。
Vue-router[嵌套][动态]
黑日里不灭的light
02-12 753
一.Vue-router 1.基础 1.1 设置导向 # 转换为html就是a标签，to指向前端路由 <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> 1.2 设置展示内容区域 解释：该代码放置在哪里，调用路由注册的模板就在哪里显示 <router-view></router-view> 1.3
vue tab切换_vue子路由跳转实现tab选项卡
weixin_39887546的博客
12-12 1255
现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再进行切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：这是tab选项卡的效果，布局就不多说了，主要是{{a.title}}，其中to是指向你要跳转的路径，这是关键，而就是最终其他子...
router-view、router-link属性、动态路由的使用、路由嵌套、路由传参
qq_46302247的博客
06-01 5765
router-link是一个全局组件，可以在任何一个vue组件中使用router-view可以理解为一个占位符，用来给 当前url映射的组件 占位的，当前url映射的组件 会替换掉动态路由：路由中的path是动态的，根据传参来显示对应的页面 注意： this.router指的是constrouter=newVueRouter()中的router，代表整个router；this.router 指的是 const router = new VueRouter() 中的router ，代表整个router；
Vue3: 路由多次点击,只路由跳转,但是页面不显示
西魏陶渊明的博客
03-13 1125
Vue3: 路由多次点击,只路由跳转,但是页面不显示
解决vue路由后界面没有变化,但是链接有的问题
12-02
在Vue.js应用中，路由是页面之间导航的关键组成部分。Vue Router是官方提供的路由库，它允许我们通过URL来管理应用程序的视图。...希望本文能帮助你更好地理解和解决“Vue路由后界面没有变化，但是链接有的问题”。
vue路由对不同界面进行传参及跳转的总结
10-17
例如，通过 Axios 发送请求并使用返回的响应推动路由跳转： ```javascript request.get('shop/ce/' + this.product_id + '?num=' + this.num, { id: this.product_id, num: this.num, }).then((response) => { if...
vue路由跳转时判断用户是否登录功能的实现
08-29
"vue路由跳转时判断用户是否登录功能的实现" 这篇文章主要讲解了如何在 Vue 中实现路由跳转时判断用户是否登录的功能。下面我们将详细讲解该功能的实现步骤： Step 1: 使用 Vuex 管理用户登录状态 在实现用户登录...
Vue路由切换页面不更新问题解决方案
11-19
总结来说，解决Vue路由切换页面不更新的问题主要依赖于理解Vue的组件复用机制以及如何通过`:key`或`v-if`策略来强制组件重新渲染。在设计和编写路由切换逻辑时，应该考虑这些因素，以确保应用程序的正常运行和用户...
vue 实现路由跳转时更改页面title
12-13
一、router文件夹下的index文件中给每个path添加meta:{}： export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' ...二、js入口文件main.
vue动态路由,三级及以上路由,地址跳转,但是页面不显示
yuzheh521的博客
12-28 2344
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,这种循环希望大家使用递归。
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 7952
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
vue-router配置后，跳转路径显示正确但是跳转后没有内容
Bill_lalala的博客
11-15 612
一般情况下是去看你所配置的router的.js文件,我这里是component写成了comment，改过来就能正常显示了。同时component的意思是用于指定一个路由对应的组件，当你在路由匹配时，Vue Router 将会渲染指定的组件到。就比如我点击Go to Home，链接显示的是自己所配置的路径，但是未显示内容。这个属性接受一个组件对象或组件的异步解析函数。还可以用components,来对应多个组件就比如。
Vue3切换路由白屏刷新后才显示页面内容
weixin_53339757的博客
10-02 2724
Vue3切换路由白屏刷新后才显示页面内容
vue3使用iframe引入其他网站，vue-router路由跳转后页面空白，刷新之后才展示页面内容乌龙事件
一只爱吃糖的小羊
08-02 2172
vue3项目的页面A跳转到页面B时，页面B页面是空白的，需要手动刷新一下才能恢复正常，在页面A中用iframe引入了别的网站（后续事实证明，跟iframe没一毛钱的关系）
VUE 选项卡跳转
prospect_的博客
07-26 848
3.components组件Tabbar.vue。1.app.vue总的router-view设置。4.router文件夹中新建index.js。1.main.js中引用。跳转前后图片未作更改。
Vue中router-view和子路由的使用方法
如需咨询可联系我，V：chen2318341674
01-29 6363
语法场景：实现一个随着切换tab栏，头部底部不变，中间内容变得功能需求。 首先需要在路由文件中添加子路由（children）： import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home.vue' import Content1 from '../views/Content1.vue' import Content2 from '../views/Content2.vue' import Cont
vue路由跳转不跳转
09-02
根据引用中的解决方法，如果你想要解决Vue路由跳转的问题，你可以查看你的路由配置界面，并找到对应的操作路由代码。在该代码中，将属性"components"改为"component"。这可能是导致路由跳转不起作用的一个潜在问题。通过修改这个属性，你可以尝试解决路由跳转的问题。 另外，根据引用，如果你在前端使用Vue.js和后端使用Spring Boot，你可能会遇到一些与路由跳转相关的问题。你可以确保你的前端和后端代码都正确配置了路由信息，并且确保你使用了正确的跳转方式和目标路由路径。 综上所述，如果你遇到了Vue路由跳转不起作用的问题，你可以尝试按照引用中的方法进行修改，并确保你的前端和后端代码都正确配置了路由信息。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [vue新增子路由不跳转或者跳转报错](https://blog.csdn.net/m0_51737922/article/details/130192274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [浏览器显示数据库中数据的条形图柱状图 前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 ...](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值