# 一、列表进入详情页传参

例如商品列表页面前往商品详情页面，需要传一个商品id

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

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

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

query通过path切换路由，params通过name切换路由

// 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.params.id;
}

• query传参的url展现方式：/detail?id=1&user=123&identity=1&更多参数
• params＋动态路由的url方式：/detail/123
• params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
},

Preview

• 一、列表进入详情页传参
• 二、请求服务器接口跨域
• 三、axios的封装和API接口的统一管理
• 四、UI库的按需加载
• 五、定时器问题
• 六、rem文件的导入问题
• 七、打包后生成很大的.map文件
• 八、fastClick的300ms延迟
• 九、路由懒加载（延迟加载）
• 十、开启gzip压缩代码

← vue过渡与动画（十五）vue实例方法（十三) →