Vue路由params和query的区别:
项目基于iview-admin-master
params用法
• 只能使用命名的路由
• 地址栏不可见,请求类似 localhost:4396/user
• 在目标页面使用this.$route.params.id来获取
• 例如:
let route = {
name: start-explore,
params: {
model_id: id,
task_id: row.id,
}
};
this.$router.push(route);
但是这种方式刷新后参数会丢失如果要保留的话,可在router.js中配置目标页面的path,在path后添加/:参数名/:···
例如:
{
path: 'start-explore/:model_id/:task_id',
name: 'start-explore',
meta: {
title: '开启配置',
hideInMenu: true,
icon: 'md-notifications'
},
component: () => import('@/view/model-explore/start-explore.vue')
},
Query用法
• 可使用命名或path的路由
• 地址栏可见,请求类似 localhost:4396/user?id=3&status=1
• 在目标页面使用this.
r
o
u
t
e
.
q
u
e
r
y
.
i
d
来
获
取
i
d
,
用
t
h
i
s
.
route.query.id来获取id,用this.
route.query.id来获取id,用this.route.query.status
• 例如:获取status
const route = {
name: 'show-task-base',
query: { id, status}
};
this.$router.push(route);
query传参方式刷新后数据不会丢失。
注意:
如果所传数据为对象(Object)需要转为字符串(JSON.stringify()),接收的时候再转为对象(JSON.parse()),不然会成[Object]