1、动态路由(页面刷新数据不丢失)
methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) }
路由配置
{ path: '/particulars/:id', name: 'particulars', component: particulars }
接收页面通过 this.$route.params.id 接收
this.$route.params.id
2、路由 name 匹配,通过params传参
methods:{ insurance(id) { this.$router.push({ name: 'particulars', params: { id: id } }) }
路由配置
{ path: '/particulars', name: 'particulars', component: particulars }
也是通过 this.$route.params.id 接收参数
3、路由path路径匹配,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?
methods:{ insurance(id) { this.$router.push({ path: '/particulars', query: { id: id } }) }
路由配置
{ path: '/particulars', name: 'particulars', component: particulars }
通过 this.$route.query.id 接收参数