admin 管理员组

文章数量: 1087649

辉太郎看前端(query和params)

前言

query和params都是一种传参方式，只是有些许不同而已。
在说两者之前，我们首先要知道$router和$route的是什么。

$router和$route

$router 是路由操作对象，用来操作路由，比如要跳转页面我们就会用到$router。
$route 是路由读取对象，用来读取我们路由跳转时携带的参数。

query和params在路由中的定义
  • query的参数可以在地址栏中拼接，定义时没有也没有关系。
  • params的参数是路由的一部分必须要有，也就是必须定义。
//query传参
{
path:"/路由",
name:"路由",
component:()=>import('组件地址')
},
//params传参
{
path:"/路由/:id",
name:"路由",
component:()=>import('组件地址')
}
  • 在跳转时，也是有一定的区别
  1. 编程式导航

query传参
跳转：this.$router.push('/路由?id=123')
目标组件中接收：this.$route.query.id
params传参
跳转：this.$router.push({name:"路由",params:{id:123456}})
目标组件中接收：this.$route.params.id

  1. 页面导航
//query传参
<router-link :to="'路由?id='+变量">详情</router-link>
//params传参
<router-link :to="路由/：id">详情</router-link>

注：接收和编程式的一样

总结
  • query使用path来引入的，而params是用name来引入的
  • query有点类似get，参数拼接在url地址栏中，在路由中不定义也没有关系；params传参时，参数必须在路由中定义，并且不会显示在url地址栏中。
初出茅庐，请各位大佬多多指教

本文标签： 辉太郎看前端(query和params)

版权声明：本文标题：辉太郎看前端(query和params) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687332533a90552.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。