Vue router路由传参的使用和区别

在Vue中使用this.$router传递参数有两种方式：query、params

方式一：

传递参数 – this.$router.push({path: "路由 ", query: {key: value}})

参数取值 – this.$route.query.key

1、配置路由

{
                    path: "/home/detail",
                    name: "详情页面",
                    component: () =>
                        import("@/pages/home/detail")
}

2、使用方法

this.$router.push({
          name: "详情页面",
          params: {
            id: id
          }
        })

3、获取方法

this.$route.params.id

这里是个大坑，一定一定要注意是this.$route，而不是this.$router。

方式二

传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}})

参数取值 – this.$route.params.key

{
                    path: "/home/detail",
                    name: "详情页面",
                    component: () =>
                        import("@/pages/home/detail")
}

2、使用方法

this.$router.push({
          path: "/home/detail",
          query: {
            id: id
          }
        })

3、获取方法

this.$route.query.id

query与params的区别

1. query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.id和this.$route.params.id。

2. query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，query在浏览器地址栏中显示参数，params则不显示。

$router 和 $route的区别

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。