辉太郎看前端(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

2. 页面导航

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

注：接收和编程式的一样

总结

• query使用path来引入的，而params是用name来引入的
• query有点类似get，参数拼接在url地址栏中，在路由中不定义也没有关系；params传参时，参数必须在路由中定义，并且不会显示在url地址栏中。

初出茅庐，请各位大佬多多指教