this.$router.push两种传参方式的区别_this.$router.push name

首先简单来说明一下 $router 和  $route的区别

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象
1
2
3
4

区别

1. 1、name可以和params、query都可以一起使用；
2. 2、path只能和query使用；
3. 3、使用params传参 刷新后不会保存，使用query刷新后可以保存；
4. 4、params不会在地址栏显示，query会在地址栏显示；
5. 5、params能和动态路由一起使用，而query不能

第一种 params传参 只能由name引入

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第二种 query传参 可以由name和path引入

//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

需要特别注意的点

1. params是路由的一部分,必须要在路由后面添加参数名，也就是占位符。
2. query是拼接在url后面的参数，没有也没关系。
3. params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。