前言

        在学习vue-router时，我一直对vue-router传参抱有很大的疑惑，今天对vue传参进行了代码实验得出了几个结论,希望记录和分享

列举几种合法的参数传递

1 以动态参数的形式传递

<router-link to="/user/3">登入</router-link>

        路由配置项 

const router = new VueRouter({
            routes: [{
                name: 'use',
                path: '/user/:id',
                component: User
            }],
        })

        在对应组件中获取id 通过 this.$route.params.id 获取

const User = {
            template: `
                <h3>你好{{$route.params.id}}</h3>
            `,
        }

        如果只传入id值该方式是最好的方法  数据不会丢失

2 以params对象的形式传参

<router-link :to="{name: 'use', params: {id: 3}}">登入</router-link>

        或者是：编程式路由

this.$router.push({name: 'use', params: {id: 3}})

        路由配置项  

 const router = new VueRouter({
            routes: [{
                name: 'use',
                path: '/user',
                component: User
            }],
        })

        注意点：1   to 前面必须加上 ： 或者 v-bind：用于绑定属性

                      2   .push({}) 和 :to({})内的配置项一定是以name路由名称的形式配置，用path拿不到数据

                      3 以这种方式传递参数，页面刷新时数据会丢失（这也正是之前让我困惑的点）

                      4 组件获取参数的形式也是 this.$route.params.id 与第1种传参有本质上的区别，不会再url上进行体现

3 以query对象的形式传参

      本质上就是在url 地址上一?xxxx=xxx的形式进行传参，数据不会丢失

<router-link :to="{name: 'use', query: {id: 3}}">登入</router-link>

this.$router.push({name: 'use', query: {id: 3}})

 const router = new VueRouter({
            routes: [{
                name: 'use',
                path: '/user',
                component: User
            }],
        })

你也可以直接在url上进行书写，传递大量数据的话推荐使用