Vue传递参数的三种方式

方案1：
    场景：点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据
    <li v-for="article in articles" @click="getDescribe(article.id)">

    methods: {
        getDescribe(id){
            this.$router.push({
            path: `/describe/${id}`
            })
        }
    }
    对应的路由配置
    {
        path: "/describe/:id",
        name: "Describe",
        compontents: Describe
    }
    //很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取        
    传递的参数值。
    this.$route.params.id   // 这样就能获取到路由携带下来的值了
方案2：
    通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
        name: "Describe",
        params: {
            id: id
        }
    })
    路由配置 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示
    {
        path: "/describe",
        name: "Describe",
        component: Describe
    }
    获取相关的路由参数
    this.$router.params.id
方案3：
    父组件：使用path来匹配路由，然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=？
    this.$router.push({
        path: "/describe",
        query: {
            id: id
        }
    })
    相关的路由配置
    {
        path: "/describe",
        name: "Describe",
        compontent: Describe
    }
    在子组件里面使用
    this.$route.query.id
***这边要注意的是 使用户路由传参的时候 path: "/XXX" 只能在 query 里面才能使用 
    但是 使用 name: "XXX" 这个话 后面两种方法都是可行的