Vue中关于路由传参query和params的区别

路由配置：{path:'/login',name:'Login',component:Login},

1.页面携带query参数跳转(path,name指定跳转到Login时都可以携带query参数)

this.$router.push({ path:'/login',name:'Login', query: { id: this.id } )

query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中

2.页面携带params参数跳转(携带params参数跳转时只能使用name指定)

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

params相当与发送了一次post请求，请求参数则不会显示，并且刷新页面之后参数会消失

当路由配置更改为

路由配置：{path:'/login/:id',name:'Login',component:Login}

并且再次发送请求，请求数据不会随着页面的刷新而消失

获取请求参数

this.$route.params.id
this.$route.query.id

注:

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

$router.push({path:'login'});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录;

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