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

Posted 2020-12-15 ylyw

路由配置：{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等