路由query和params参数的区别原创

$router 和 $route

• $router 是Vue-router的路由实例要导航到不同的url，需要使用 $router.push 方法
• $route 是当前router可以获得跳转对象。 name、path、query、params 等信息

query

query 传递参数，可以传递 name 和 path 有两种传播形式，

//query传递参数，使用name跳转
this.$router.push({
    name:second,
    query: {
        queryId:20180822,
        queryName: query
    }
})

//query传递参数，使用path跳转
this.$router.push({
    path:second,
    query: {
        queryId:20180822,
        queryName: query
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

生成的 url 如图所示：携带 ？ 参数表单的，并包含参数。 key 和 value

params

params 传输参数，仅支持 name 的形式

//params传参 使用name
this.$router.push({
  name:second,
  params: {
    id:20180822,
     name: query
  }
})

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

//路由
{
path: /second/:id/:name,
name: second,
component: () => import(@/view/second)
}

params 需要注意的是，需要定义路由信息，例如： path: /xx/:id/:name ,这允许携带参数跳跃，否则。 url 不会改变，再次刷新页面后不会读取参数。

生成的url如图所示：仅参数 value ，相对较高的安全性

总结

• 接收参数的形式各不相同。 this.$route.query.id 和 this.$route.params.id
• query 支持 path和name 两种形式， params 仅支持 name 形式
• 生成 url 不同的格式， query 产生的url带有问号并包含参数。 key和value ， params 仅承载参数 value
• 使用 params 需要设置路线 path:/xx/:id/:name 的形式