路由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的形式