【Vue】面经基础版-查询参数传参

说明

跳转详情页需要把当前点击的文章id传给详情页，获取数据

• 查询参数传参 this.$router.push(‘/detail?参数1=参数值&参数2=参数值’)
• 动态路由传参 先改造路由 在传参 this.$router.push(‘/detail/参数值’)

查询参数传参实现

@\views\Article.vue

<template><div class="article-page"><div class="article-item" v-for="item in articelList" :key="item.id" @click="$router.push(`/detail?id=${item.id}`)">...</div></div>
</template>

@\views\ArticleDetail.vue

created() {console.log(this.$route.query.id)
}