版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37615202/article/details/83008755
在vue项目中,往往会遇到这样的情况,就是要实现在一文章列表中,点击其中一条跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,无论点哪一条都是跳到相同的页面结构(下一个页面的页面使用的组件是一样的),只是填的数据不一样,这个时候就需要实现跳转的时候一起把参数携带过去。
<template>
<div class="template">
<!--点击文章列表跳转到相应的文章页面-->
<ul>
<li v-for="(article_task,index) in tasks">
<!--使用v-bind动态绑定id传递给目标路径-->
<!--注意: 这里携带了了article_task的一个参数id-->
<router-link tag="a" :to="{path:'/articleTask',query{id:article_task.id}}">
<div class="article-render">
<span>{{index+1}}.</span>
<span>{{article_task.title}}</span>
<span>
{{article_task.content}}%
</span>
</div>
</router-link>
</li>
</ul>
</div>
</template>
但是:上面的的router-link传递一个一个参数id,当我们需要传递多个参数的时候应该怎么办呢,很简单,只需要将query的参数用逗号隔开就好了
<router-link tag="a"
:to="{
path:'/articleTask',
query{id:article_task.id,title:article_task.title,content:article_task.content}}">
</router-link>
但是问题,又来了。。。。。代码这样写贼鸡儿多,万一写错一个那我岂不是文章不现实了,所以还有一个更简单的办法
<router-link tag="a" :to="{path:'/articleTask',query{arry:article_task}}"></router-link>
传递参数可以,怎么接收参数呢?在目标组件里接收参数,只需要在created()钩子中接收即可,实现如下:
<script>
export default {
data() {
return {
}
},
created() {
//获取参数的时候 是 this.$route ! route !! route !!!
//单个参数传递的时候
this.id = this.$route.query.id;//获取上个页面传递的id,在下面获取数据的时候先提交id
//这边接收上个组件传递过来的arry数组,赋值给data中定义的articleTask
this.articleTask = this.$route.query.arry;
},
}
</script>