【碎片学习】—— Vue项目重要知识点笔记（一）

前言：本文学习摘要自掘金作者愣锤的博文

---

 一、列表进入详情页的传参问题

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>

http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是this.$route.query.id

vue传参方式有：query、params+动态路由传参。

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

query通过this.$route.query来接收参数，params通过this.$route.params来接收参数。　　

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params通过this.$route.params来接收参数
created () {
    const id = this.$route.par