路由传参的三种方法

/** 
*#第一种方法 页面刷新数据不会丢失# 
*/  

methods：{ 
     insurance(id) {//直接调用$router.push 实现携带参数的跳转
         this.$router.push({
         path: `/particulars/${id}`
     })
}

需要对应路由配置如下：

{
        path: '/particulars/:id', 
        name: 'particulars',
        component: particulars
}

可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值\另外页面获取参数如下

this.$route.params.id

/** 
*#第二种方法 页面刷新数据会丢失# 
*/   通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{ 
        insurance(id) {
            this.$router.push({
                name: 'particulars',
                params: {
                    id: id 
                } 
        })
}

对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

{ 
        path: '/particulars', 
        name: 'particulars', 
        component: particulars 
}

子组件中: 这样来获取参数

this.$route.params.id

/** 
*#第三种方法 使用path来匹配路由，然后通过query来传递参数# 
*/   这种情况下 query传递的参数会显示在url后面?id=？

methods：{ 
    insurance(id) { 
    this.$router.push({ 
        path: '/particulars', 
        query: { 
            id: id 
        } 
    }) 
}

对应子组件: 这样来获取参数

this.$route.query.id

特别注意
组件中 获取参数的时候是route.params而不是router 这很重要~~~