vue-router传递参数params和query的区别

如题。

比较用法

1. 用法

query要用path来引入,params要用name来引入(当你使用params方法传参的时候,要在路由后面加参数名),接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
如果传参时未定义name,则获取不到params。

路由界面

1
2
3
4
5
6
7
<router-link 
:to="{
name: 'router1',
path: 'Hello',
params: { id: 'menuIndex' },
query: { id: 'menuIndex' }
}"><button>Go to Foo</button></router-link>

2. url地址显示

query更加类似于我们ajax中get传参,params则类似于post,说得简单一些,即前者在浏览器地址栏中显示参数,后者则不显示。

query
http://localhost:8080/workorder/newApply?type=BOX_DEPLOY&typeDesc=%E5%B0%8F%E7%99%BD%E7%9B%92%E9%83%A8%E7%BD%B2

params
http://localhost:8080/workorder/newApply

3. 注意点

query刷新不会丢失query里面的数据
params刷新会丢失params里面的数据

# vue

本文总阅读量

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×