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

在Vue的毕设项目中,作者遇到使用`router-link`跳转页面时,页面显示为空且数据未能正确传递的问题。通过对比发现,使用`this.$router.push()`方法能正常跳转并显示内容。分析原因可能是路由提前跳转导致值无法正确传递,建议在获取数据后再进行页面跳转。

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

问题叙述

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

1.使用router-link

      <!-- 中间内容 -->
      <div class="mainContent">
        <div class="content">
          <div  class="news_item">
            <div class="item" :key="tnew.tnewId" v-
### 如何使用 `router-link` 实现页面跳转Vue.js 中,`<router-link>` 是一个核心组件,用于实现页面间的导航功能。该组件可以根据其属性动态生成 `<a>` 标签,并绑定必要的事件以触发路由跳转[^1]。 以下是基本的 `<router-link>` 使用方法: ```html <template> <div> <!-- 基本用法 --> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <!-- 如果需要传递参数 --> <router-link :to="{ name: 'UserProfile', params: { userId: 123 }}">User Profile</router-link> <!-- 替代写法:通过 query 参数传参 --> <router-link :to="{ path: '/search', query: { q: 'Vue' }}">Search</router-link> </div> </template> ``` #### 跳转到新标签页的示例 如果希望 `<router-link>` 的目标链接能够在新的浏览器标签页中打开,则可以通过设置 `tag="a"` 和 `target="_blank"` 来实现此目的[^3]。具体代码如下所示: ```html <template> <div> <!-- 新标签页跳转 --> <router-link :to="{ path: '/details' }" tag="a" target="_blank" > Open Details in New Tab </router-link> </div> </template> ``` 在此示例中,`:to` 动态绑定了路径 `/details`,而 `tag="a"` 将 `<router-link>` 渲染为标准 HTML 锚点标签,从而允许我们添加 `target="_blank"` 属性来开启新窗口或标签页的功能[^3]。 ### 注意事项 当使用 `target="_blank"` 打开外部链接或者内部路由时,建议始终附加 `rel="noopener noreferrer"` 属性,这样可以防止新开的页面获取对原始页面的访问权限,提高安全性[^3]。 ```html <router-link :to="{ path: '/external-site' }" tag="a" target="_blank" rel="noopener noreferrer" > External Site </router-link> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值