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

最新推荐文章于 2024-11-22 16:47:27 发布

原创最新推荐文章于 2024-11-22 16:47:27 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

部署运行你感兴趣的模型镜像

问题叙述

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

1.使用router-link

      <!-- 中间内容 -->
      <div class="mainContent">
        <div class="content">
          <div  class="news_item">
            <div class="item" :key="tnew.tnewId" v-for="tnew in list">
                <img :src="vueBaseUrl+tnew.tnewImgUrl" alt="这是一张图片" class="news_pic" v-if="tnew.tnewImgUrl"> <!--  alt：用户无法显示图片或者用户禁用图像时替代的文本内容 -->
                <router-link to="/re_detail"><div class="text"  @click="handleContent(tnew.tnewId)"><span class="text_title">{{tnew.tnewTitle}}</span></div></router-link>
                <br>
                <br>
                <br>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{tnew.publishTime}}&nbsp;&nbsp;|&nbsp;&nbsp;点击次数{{tnew.click}}</span>
            </div>
        </div>
        </div>
      </div>

结果：
标题和详细内容不符。
页面乱码
在这里插入图片描述

2.this.$router.push()方法动态跳转

    //查看新闻详细内容
    handleContent(id){
      //这里的this指的是直接调用者VueComponent
      window.localStorage.setItem('get-content',id);

      this.$router.push({path:'/re_detail'});      
    }