Vue路由params和query的区别

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.$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]