关于使用路由跳转时，页面不呈现的问题，

已于 2022-04-09 14:07:12 修改
阅读量833 收藏
点赞数 1
文章标签： vue.js 前端
于 2022-04-09 14:06:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55557411/article/details/124059967
版权

在今天写跳转时，使用router-link 和编程式导航，实现页面跳转时，出现页面不呈现的问题，控制台也不报错，经仔细排查，

发现，把路由配置里的 组件(component) 写成了 计算属性(computed)

希望其他小伙伴，不要犯我这种低级错误

叫兽~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用router-link跳转页面，页面空白，数据未传递到指定页面——解决方法
Var521的博客
04-21 3934
问题叙述 我的毕设是新闻发布管理系统 这是首页新闻列表，我需要点击新闻列表获取详细的新闻内容，当我点击时，需要将新闻的编号，传递给后台，之后跳转页面，把后台查到的内容渲染到页面上，此时跳转页面有两种方法： 1.使用router-link <!-- 中间内容 --> <div class="mainContent"> <div ...
Vue路由页面跳转后不显示界面的问题
风不知从何处起的小屋
12-04 9423
1.首先检查是否配置了 2.检查关键字是否有错误，首先检查名字的大小写，然后检查关键字是否出错 着重检查:路由的配置界面，component关键字和routes 【将routes误写成了router ----》这个错误经常出现，引起重视！！！】 ...
vue 路由能够跳转，但不显示内容
z_sr1的博客
09-30 486
<router-linkto="/">首页</router-link>| <router-linkto="About">About</router-link> 已经成功跳转 不显示每个页面的内容 需要加上 <router-view></router-view>
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9902
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
Vue 中使用 router-link 后，URL 变化但是页面不刷新
m0_62404884的博客
11-02 3542
首先遇到这个问题后很疑惑，明明设置了router-link 跳转，但还是出现了问题，虽然URL发生了变化，但是页面却没变化，还停留在上一个页面的内容。尝试了好多方法发现都没用，最终找到了一个比较好的方法。 在app.js中添加 <router-view :key="$route.fullPath" /> ...
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
最新发布
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
深入揭秘前端路由本质，手写 mini-router
前端劝退师
09-22 335
前言前端路由一直是一个很经典的话题，不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。通过本文，你可以学习到：前端路由...
VueJs路由跳转——vue-router的使用详解
10-20
【VueJs路由跳转——vue-router的使用详解】 Vue.js是一个流行的前端JavaScript框架，用于构建用户界面，尤其适合单页应用程序。为了管理页面间的跳转和状态，Vue.js引入了vue-router作为官方的路由库。vue-router...
Vue路由切换页面不更新问题解决方案
11-19
在使用vue-router时，有时会遇到页面在路由切换后未能正确更新的问题。这通常发生在同一个组件被多个路由引用时，由于Vue的虚拟DOM机制，它可能会复用已经存在的组件实例，导致数据变化无法体现在视图上。 问题呈现...
vue单页面应用打开新窗口显示跳转页面的实例
10-17
综上所述，要在Vue单页面应用中打开新窗口显示跳转页面，只需要结合vue-router的`resolve`方法获取目标URL，并使用`window.open`方法创建新的窗口来加载该URL。这种方法适用于那些需要在新窗口中呈现内容，如打印...
vue子路由跳转实现tab选项卡
10-16
总结起来，Vue子路由跳转实现tab选项卡布局的核心在于使用`<router-link>`和`<router-view>`组件配合Vue Router的子路由配置。通过这种方式，我们可以轻松地管理导航和页面切换，构建出复杂的后台管理系统或任何需要...
vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题
weixin_43299180的博客
03-03 1万+
问题描述： 在做菜单权限的时候，使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示，在点击菜单跳转之后，浏览器刷新一下，页面没有跳转到 404 页面，而是变成了空白。 问题原因： addRoutes 和 vuex 一样，在浏览器刷新后数据会丢失，因为刷新页面 Vue 会重新实例化，路由也会恢复到初始路由。 解决方案： 在页面刷新之后重新获取到通过权限修改后的路由表，然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面
3. 路由返回页面未刷新的解决方法（随手记录）
qq_35491739的博客
12-16 544
路由返回页面未刷新的解决方法，使用this.$forceUpdate()或者获取上页面实例
router-link里面文本不显示问题
jsmylo的博客
06-01 1719
一.项目里面在menu菜单栏使用ant-design的menu组件，在标签里面使用图标组件和router-link标签。在router-link里面写文本，不显示。二.看解决前和解决后 里面的插值根本不管用。
vue-router 路由嵌套显示不出来_vuerouter 知识点查漏补缺
weixin_39898150的博客
11-20 491
一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接呢？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA(单页应用)的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 v...
router-link不识别
weixin_42600128的博客
02-16 791
router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一： 你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。 你的代码中存在拼写错误。请检查代码中是否有拼写错误，...
vue 路由 router跳转问题 路由跳转不显示
ccq的博客
09-30 2272
路由 vue路由 路由跳转 前端路由跳转问题 router
vue中路由跳转方式汇总，解决正确跳转不能显示页面问题。
热门推荐
张凯杰扽博客
11-02 1万+
自己所遇到的路由能跳转，但是不能正常显示的问题。 1，自己的路由路径写的有问题（能正常跳转，但是不能显示页面，可能是根据这个路由，找不到相应的文件页面，）。 2，没有正确在父页面中写出子页面显示的标签（"<router-view> </router-view>"） 3，注册的路由中含有错误文件路径，找不到应该显示的页面。 ➢ 前端路由跳转是使用的哈希跳转， ...
使用router-link，在浏览器后退之后，在点击跳转，URL变化，但是页面不刷新问题，解决办法
qq_39030777的博客
01-27 1198
在父组件中 <router-view :key="$route.fullPath"></router-view>
我是不是可以使用django来实现页面的跳转
06-09
是的，你可以使用 Django 框架来实现页面的跳转和路由管理。Django 是一个高效、灵活、易用的 Python Web 框架，可以帮助开发者快速构建 Web 应用程序。 在 Django 中，页面的跳转和路由管理通常是通过 URLconf（URL 配置）来实现的。URLconf 是一个 Python 模块，用于将 URL 映射到视图函数或视图类。当用户访问某个 URL 时，Django 会根据 URLconf 中的规则，将请求转发给对应的视图函数或视图类，从而实现页面的跳转和处理。 下面是实现页面跳转的基本步骤： 1. 创建 URLconf。在 Django 项目的根目录下创建一个名为 `urls.py` 的文件，并在文件中定义 URLconf 规则。例如： ```python from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('about/', views.about, name='about'), ] ``` 这里的 `urlpatterns` 定义了 URLconf 规则，其中的每个 `path` 对象表示一个 URL 规则。例如，第一个 URL 规则表示访问根路径时使用 `index` 视图函数处理请求。 2. 创建视图函数。在 Django 项目的应用程序目录（例如 `myapp`）下创建一个名为 `views.py` 的文件，并在文件中定义视图函数。例如： ```python from django.shortcuts import render def index(request): return render(request, 'index.html') def about(request): return render(request, 'about.html') ``` 这里的 `index` 和 `about` 函数分别处理根路径和 `/about` 路径的请求，使用 `render` 函数呈现 HTML 模板。 3. 创建 HTML 模板。在 Django 项目的应用程序目录下创建一个名为 `templates` 的文件夹，并在文件夹中创建 HTML 模板文件。例如： ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <title>Index Page</title> </head> <body> <h1>Welcome to Index Page</h1> <p>This is the index page.</p> </body> </html> ``` ```html <!-- about.html --> <!DOCTYPE html> <html> <head> <title>About Page</title> </head> <body> <h1>Welcome to About Page</h1> <p>This is the about page.</p> </body> </html> ``` 这里的 `index.html` 和 `about.html` 分别对应根路径和 `/about` 路径的页面内容。 4. 在入口文件中挂载 URLconf。在 Django 项目的入口文件 `urls.py` 中，需要将应用程序的 URLconf 挂载到项目的总 URLconf 上。例如： ```python from django.contrib import admin from django.urls import include, path urlpatterns = [ path('admin/', admin.site.urls), path('', include('myapp.urls')), ] ``` 这里的 `include('myapp.urls')` 表示将应用程序 `myapp` 的 URLconf 挂载到根路径上。这样，当用户访问根路径或 `/about` 路径时，就会使用 `myapp` 应用程序的 URLconf 来处理请求。 至此，就完成了基本的页面跳转和路由管理。当访问不同的 URL 时，Django 会根据 URLconf 规则，将请求转发给对应的视图函数或视图类，从而实现页面的跳转和处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值