Vue 跳转路由时的传参方式

query

通过 query 传参

this.$router.push('/login?username=pp&age=18&desc=xx');

this.$router.push({
  path: '/login',
  query: {
    username: 'pp',
    age: 18,
    desc: 'xxx',
  },
});

this.$router.push({
  name: 'login',
  query: {
    username: 'pp',
    age: 18,
    desc: 'xxx',
  },
});

获取

 this.$route.query;

params

通过params传参

this.$router.push({
  name: 'login',
  params: {
    username: 'pp',
    age: 18,
  },
});

获取 

this.$route.params;

区别:  

1. params 传参, 必须要用命名路由的方式传值

2. params 传参, 不会显示在地址栏中, 刷新会丢失