vue路由传参的方法

vue-router路由传参

例一：query传参

  //给需要操作的标签添加点击事件

在methods(方法)里

methods:{

            goto(id){

                this.$router.push({

                    path:"/xxx",            //需要跳转的路径

                    query:{

                        id:id            //第二个id是方法里的参数赋值给第一个id

                    }

                })

            }

        }

在跳转后的页面使用 this.$route.query.id 获取

query传递的参数会显示在url后面?id=？

例二：params传参

methods:{

            goto(id){

                    this.$router.push({

                            name: 'Describe',

                            params: { id: id } })

            }

        }

在跳转后的页面使用 this.$route.params.id 获取

 用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。

params传参不会显示在路径上，在对应路由配置如下：加：id则会显示在路由中

{ path: '/describe/:id', name: 'Describe', component: Describe }