Vue routerlink跳转后路径变化，显示空白页

已于 2024-03-23 10:41:31 修改
阅读量564 收藏 10
点赞数 10
文章标签： vue.js 前端 javascript
于 2023-12-25 22:01:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62933419/article/details/135210074
版权 
<router-link to="../pages/AboutUs.vue">关于我们</router-link>

这样写路径会变化，但显示的是空白页，把路径换成百度的网址也不行

解决办法：

<router-link :to="{name:'AboutUs'}">关于我们</router-link>

name是路由里的

这样就能成功跳转并且显示了

不再奢望119
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用router-link跳转页面，页面空白，数据未传递到指定页面——解决方法
Var521的博客
04-21 3933
问题叙述 我的毕设是新闻发布管理系统 这是首页新闻列表，我需要点击新闻列表获取详细的新闻内容，当我点击时，需要将新闻的编号，传递给后台，之后跳转页面，把后台查到的内容渲染到页面上，此时跳转页面有两种方法： 1.使用router-link <!-- 中间内容 --> <div class="mainContent"> <div ...
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...
vue router-link跳转后为空白页的解决办法
Lyndsey的博客
06-06 1万+
由于原文件为import router from './router' 然后自己添加路由文件: const routes = [ { path: '/home', component: Home }, { path: '/spacenlp', component: SpaceNLP }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] ...
Vue设置路由后页面仍不显示为空白
apple_51927114的博客
09-11 2575
Vue设置路由后页面仍不显示为空白。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4487
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
vue动态路由,三级及以上路由,地址跳转,但是页面不显示
yuzheh521的博客
12-28 2297
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,这种循环希望大家使用递归。
router路由跳转但页面内容不显示
weixin_41618672的博客
02-02 394
新手入门vue3踩坑记录
vue实现登录后页面跳转到之前页面
01-19
1.router.currentRoute:当前的路由信息对象，我们可以通过router.currentRoute.fullPath获得解析后的 URL，包含查询参数和 hash 的完整路径，如果要访问的页面的路由有命名（name）的话，可以通过router.current...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
Vue-router 页面跳转空白问题
Tsinbo1314的博客
01-05 3565
问题描述 今天在写vue项目时遇到一个小问题，在做页面跳转的时候，跳转到某个页面时，突然页面内容部分全部变成空白。大概类似这种情况，啥也没有。 问题原因 在反复检查发现，在组件中template中有2个div标签，大概如这样 <template> <div>...</div> <div>...</div> <template> 写Vue的应该都知道，一个template中只能放置一个div，不能并列...
vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题
weixin_43299180的博客
03-03 1万+
问题描述： 在做菜单权限的时候，使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示，在点击菜单跳转之后，浏览器刷新一下，页面没有跳转到 404 页面，而是变成了空白。 问题原因： addRoutes 和 vuex 一样，在浏览器刷新后数据会丢失，因为刷新页面 Vue 会重新实例化，路由也会恢复到初始路由。 解决方案： 在页面刷新之后重新获取到通过权限修改后的路由表，然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面
vue中页面跳转白屏的解决方式，同一路由地址，参数不同跳转白屏的解决方式
super帅的博客
04-05 5508
路由地址的变化例如下面： http://localhost:8080/#/category/1013001 -->地址相同，只有参数发生变化 http://localhost:8080/#/category/1013304 同一个地址携带不同的参数跳转内容并没有更新 原因： 地址的变化了，其实本路由对应的path并没有变化（还是#/category），是参数变化了。此时当前路径匹配的组件会被直接复用，这个组件在地址切换的过程中，并没有重新销毁生成，或导致页面白屏的情况出现，也就说,set
react-router Link跳转后不返回页面顶部的问题
u013790941的博客
11-14 2276
遇到的问题 由A页面跳转到B页面，B页面停留在A页面的位置，没有返回到顶部。 问题分析 首先分析下出现此问题的原因： 在项目中使用的是 hashHistory，它是建立在 history 之上的，当路由发生变化时会记住原路由的状态，跳转新页面后默认停留在原页面的位置。 解决方法 使用 withRouter； withRouter可以包装任何自定义组件，将react-router 的 histo...
记录vue-router跳转页面空白问题
Nothingnessdosink的博客
12-19 5939
vue- router里踩坑太多，全记录在这里，持续更新。
Vue路由跳转但显示空白页面
热门推荐
weixin_51173316的博客
08-03 3万+
在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。 原因一： 没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。 路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。 解决方法：在父路由的...
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
Vue路由跳转-页面显示空白
孙少的博客
05-07 4778
跳转页面，指定路径跳转到某个页面时，如果没有按照正确的方式写路径，会导致页面显示空白 html部分 方法1、 <div class="nav-item-1" @click="navitem">拼团专区</div> 方法2、 <router-link class="nav-item-2" to="/navitem">秒杀活动</router-link> js部分 methods: { //拼团专区页面 navite
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
weixin_45288172的博客
02-01 2653
vue3页面跳转产生白屏，刷新后能正常展示的解决方案
vue路由匹配上之后，但页面空白的问题
前端-卡布达的博客
01-30 1万+
在vue项目中，可能会遇到路由匹配上之后，页面空白没有内容的情况，就像下面截图所示： 于是就查看了一些其他朋友对该问题的回答，主要有下面几点： 1、路由配置重复，如果配置了两个重复的路由，比如配置了两个【path: '/'】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2、访问的页面没有配置路由，那么访问的页面也可能是空白页，比如访问/test，但是路由里却没有配置，也不会出现页面。 但是我排查了上面这两点，发现都不存在上面两点的问题，但是页面还是不出来。后来仔细排查发现问题.
vue3路由跳转时路径变化页面没出来
最新发布
06-14
Vue 3中的路由跳转如果路径变化了但页面没有及时更新，这可能是由于几个原因导致的。首先，你需要确认是否正确配置了`router`和`vue-router`。以下是可能的问题及其解决方案： 1. **组件懒加载**：如果你使用的是懒加载（即动态导入），确保在`<router-view>`中正确处理异步组件的加载，例如使用`v-if`或`v-show`来避免初始渲染空白。 ```html <router-view v-if="$route.meta.isLazy" :key="$route.path"></router-view> ``` 2. **路由守卫**：检查`beforeEach`守卫是否有阻止跳转的情况，或者更新状态太慢导致界面更新延迟。 ```javascript router.beforeEach((to, from, next) => { // 检查权限或执行其他操作 next(); }) ``` 3. **生命周期钩子**：确保组件的生命周期方法`mounted`或`updated`在数据更新后触发视图重新渲染。 4. **Vue Router 缓存**：如果开启了`vue-router`的缓存功能，记得在`router.options`中设置`cache`为`false`，或者在需要强制刷新的地方添加`this.$router.replace(to)`代替`this.$router.push(to)`。 5. **异步依赖问题**：如果路由依赖于外部API或计算属性，确保这些在跳转之前已经完成并返回了预期的数据。 相关问题： 1. 如何检查和禁用Vue Router的缓存？ 2. 如何正确地处理异步组件在`<router-view>`的渲染？ 3. 在Vue Router中，路由守卫的作用是什么？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值