query参数和params参数的区别与联系

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在刷新的时候参数会丢失通常要结合本地储存使用

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • (一) 基本模块 01基础模板语法 1.1插值语法 -- 解析标签体里的内容 data -> {{}} 里可以写j...
    SteinsGate_5e01阅读 4,162评论 0 31
  • 笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别:vue.js...
    ARGM10阅读 773评论 0 0
  • vue2笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favico...
    Daydream_许多阅读 219评论 0 0
  • 尚硅谷vue视频笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区...
    键盘已附魔阅读 207评论 0 0
  • 笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别:vue.js...
    jjbnxy阅读 212评论 0 0

友情链接更多精彩内容