路由跳转传值

0、接收数据

1. query 传值

只能用来传输的数据量少，接收的数据不可变
同时获取的值会在地址栏中显示出来，并且刷新页面，打印的值不会消失
127.0.0.1:8848/测试/route.html#/a?a=123&b=456

routes: [ {
  path: '/a',
  component: mya
}

通过 path 来连接和组件页面 brother 之间的关系

this.$router.push({
  path:'/a',
  query:{
    a:123,
    b:456
  }
});

在组件页面 brother 中可以打印出来获取到的值

var mya = {
    template: '<div>a组件{{this.$route.query.a}}{{this.$route.query.b}}</div>'
}

2. params 传值

只能用来传输的数据量少，接收的数据不可变
这种方法获取传值不会在地址栏中显示，但刷新页面打印的数据会消失
127.0.0.1:8848/测试/route.html#/a

routes: [ {
  path: '/a',
  name: 'a',
  component: mya
}

通过 path 来连接和组件页面 brother 之间的关系

this.$router.push({
  name: 'a',
  params: {
    a: this.count,
    b: 456
  }
});

在组件页面 brother 中可以打印出来获取到的值

var mya = {
    template: '<div>a组件{{this.$route.query.a}}{{this.$route.query.b}}</div>'
}

3. 动态路由拼接传值

只能用来传输的数据量少，接收的数据不可变
这种方法操作起来就要简单一些，没有多余的参数对象
这种方法刷新页面数据不会消失，并且传递的数据也是可以在地址栏看到的
127.0.0.1:8848/测试/route.html#/a

routes: [ {
  path: '/a/:a/:b',
  name: 'a',
  component: mya
}

通过 path 来连接和组件页面 brother 之间的关系

this.$router.push({
  this.$router.push({
    path: 'a/6/123'
  });

在组件页面 brother 中可以打印出来获取到的值

var mya = {
    template: '<div>a组件{{this.$route.query.a}}{{this.$route.query.b}}</div>'
}