query参数
query参数通过进行拼接,最终结果会在地址栏进行显示,【刷新之后也会存在,会有缓存】
query参数传递的时候需要与path进行绑定
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{ id:666, title:'你好'
}
}">跳转</router-link>
接收的参数可以在路由中找到
$route.query.id
$route.query.title
params参数 :在路由里面进行拼接
直接通过 /:携带的参数的名字 进行拼接,通过 $route.params;来进行接收
不会在地址栏进行显示,刷新页面之后参数就会消失 【这里并不说明params参数一定不会在地栏栏进行显示】
path:'/detail/:id?:title' 路径detail后面有两个参数是 【id title】
params参数传递
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link :to="{
name:'xiangqing',
params:{ id:666, title:'你好'
}
}" >跳转</router-link>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
params 参数在配置路由的时候必须进行声明接收,不然是不能获取到参数的
总结:
1.传参的方式不同 query通过?和&拼接 params通过/拼接
2 query会在地址栏中显示 params虽然也会在地址栏中显示,但是需要在路由匹配规则里面去定义定义方式为 路由名称/:参数1/:参数2
3. query在页面刷新的时候仍然会保留参数 params在刷新的时候参数会丢失通常要结合本地储存使用