使用router-link跳转页面，页面空白，数据未传递到指定页面——解决方法

最新推荐文章于 2024-06-20 19:22:25 发布
最新推荐文章于 2024-06-20 19:22:25 发布
阅读量3.9k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Var521/article/details/105655654
版权
在Vue的毕设项目中，作者遇到使用`router-link`跳转页面时，页面显示为空且数据未能正确传递的问题。通过对比发现，使用`this.$router.push()`方法能正常跳转并显示内容。分析原因可能是路由提前跳转导致值无法正确传递，建议在获取数据后再进行页面跳转。
摘要由CSDN通过智能技术生成

问题叙述

我的毕设是新闻发布管理系统
在这里插入图片描述
这是首页新闻列表，我需要点击新闻列表获取详细的新闻内容，当我点击时，需要将新闻的编号，传递给后台，之后跳转页面，把后台查到的内容渲染到页面上，此时跳转页面有两种方法：

1.使用router-link

      <!-- 中间内容 -->
      <div class="mainContent">
        <div class="content">
          <div  class="news_item">
            <div class="item" :key="tnew.tnewId" v-
最低0.47元/天 解锁文章
Var521
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读
孙叫兽的博客
07-14 3万+
目录 第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
Router-link 跳转页面回到头部问题
qq_37254736的博客
10-18 644
Router-link 跳转页面回到头部问题 在vue-router配置文件中添加如下代码 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } 案例如下 export default () => { return new Router({ mode: 'history', ...
Vue routerlink跳转后路径变化，显示空白页
qq_62933419的博客
12-25 619
router-link to="../pages/AboutUs.vue">关于我们关于我们这样写路径会变化，但显示的是空白页，把路径换成百度的网址也不行。这样就能成功跳转并且显示了。
Vue3路由跳转页面显示空白问题
最新发布
CZDBGSY的博客
06-20 393
A页面有template下有两个div，虽然V3声明可以多个div。但从A页面发起的跳转会失败，显示为空白。将router.push 字符串传参改为 {name：‘...’} 或者 {path：‘...’}就可。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4584
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
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路由跳转-页面显示空白
孙少的博客
05-07 4875
跳转页面，指定路径跳转到某个页面时，如果没有按照正确的方式写路径，会导致页面显示空白 html部分 方法1、 <div class="nav-item-1" @click="navitem">拼团专区</div> 方法2、 <router-link class="nav-item-2" to="/navitem">秒杀活动</router-link> js部分 methods: { //拼团专区页面 navite
doc---vue-cli脚手架项目问题总结（3）——路由使用部分
qq_38185872的博客
05-16 369
======================路由使用部分========================= ##、定义路由 定义路由router，并引进vue实例中 var router = new VueRouter({ routes:[ { path:'/', name: 'home', c...
前端面试（2）
weixin_46336091的博客
01-03 1147
一些不会渲染输出的节点，比如 script、meta、link 等。一些通过 css 进行隐藏的节点。比如 display : none。注意，使用 visibility 和 opacity 隐藏的节点，还是会显示在渲染树上的（因为还占据文档空间），只有 display : none 的节点才不会显示在渲染树上。Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
关于使用路由跳转时，页面不呈现的问题，
m0_55557411的博客
04-09 844
关于使用路由跳转时，页面不呈现的问题，
解决vuecli使用this.$router.push跳转传参，参数在页面正常显示，控制台报空问题
qq_45560350的博客
03-11 1061
错误示例 在传参页面用 this.$router.push({ path: "/m/singleNews", query: { news: this.news } });语句 来进行页面的跳转并传参 在被传参的页面的mounted方法中用 this.news = this.$route.query.news;语句 来接收传递来的参数，并赋值给data中定义的news变量 在页面上通过{{news.title}} {{news.time}}等进行显示 // data中定义的news变量 data() {
Vue-router 页面跳转空白问题
Tsinbo1314的博客
01-05 3644
问题描述 今天在写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】this.router.push页面跳转后样式乱了
weiambt的博客
01-02 742
分析了一下，就是前一个页面的style样式被传递到了下一个页面，导致后面的span标签内的颜色变成了蓝色。使用$router.push跳转后的渲染如下。在前一个页面中的style标签中添加。属性,表示当前是局部样式，如下。正常加载时的样式如下。
vue $router 打开空白页
杨阳洋的博客
07-02 1370
默认是替换当前页 this.$router.push('/index') 可以用如下方法进行空白页打开 let xtbl = this.$router.resolve('/host/wait') window.open(xtbl.href, '_blank');
vue路由跳转问题，其他页面正常显示，刚创建的路由页面可以显示，但是刷新后页面空白问题
weixin_41277748的博客
04-13 1359
看似没用问题的路由，当使用this.$router.push({path: "/legalNotices"})时发现不能跳转， 当我使用this.$router.push({name: "legalNotices"})，name时发现可以跳转了，但结果刷新页面，页面空白； 其他页面的路由可以使用path跳转，就有那么几个不行；然后和其他路由的对比一下 结果发现天大的坑，因为空格问题，无法识别路由path,最后把空格去掉，就可以正常显示了刷新页面也可以正常显示了 ...
html路由跳转首页空白,记一次VUE路由跳转后页面空白
weixin_33610780的博客
07-19 851
VUE从A页面路由跳转到B页面后页面空白，路由配置如下:importVuefrom'vue'importRouterfrom'vue-router'importHomeViewfrom'@/views/HomeView'importPlayViewfrom'@/views/PlayView'Vue.use(Router)exportdefaultnewRouter({...
使用 router-link 跳转页面
03-20
可以使用以下代码实现 router-link 跳转页面： <router-link to="/your-page">跳转到你的页面</router-link> 其中，"/your-page" 是你要跳转的页面的路径。你需要在路由配置中定义该路径对应的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值