【Vue】面经基础版-动态路由传参

实现步骤

• 改造路由
• 动态传参
• 在详情页获取参数

---

代码实现

改造路由

router/index.js

...
{path: '/detail/:id',component: ArticleDetail
}

@\views\Article.vue

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

@\views\ArticleDetail.vue

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