路由传参以及跳转_路由跳转传参

路由传参以及跳转：

this.$router相当于一个全局的路有对象，包含了很多属性和对象（比如history对象），任何页面都可以调用其push()、replace()、go()等方法
this.$route表示当前路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等属性。
简单来说：
$router:是路由操作对象，只写对象
$route:是路由信息对象，只读对象

// 操作路由跳转
this.$router.push({
  name:'hello',
  params:{
    name:'world',
    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

query传递参数

params传参主要用name来引入。路由配置里面(path:/index,name:index)query也可以使用name和path来引入传参。

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

// query传参,使用path跳转
this.$router.push({
  path:'second',
  query:{
     queryId:'1111',
      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

params传递参数

使用params传参只能使用name进行引入

// params传参 使用name
this.$router.push({
 name:'second',
 params:{
   id:'111',
   name:'params'
 }
})

// params 接收参数
this.id  = this.$route.params.id;
this.name = this.$route.params.name;

// 路由
{
 patth:'/second/:id/:name',
 name:'second',
 component:()=>import('@/view/second')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

this.$router.resolve跳转路由打开新窗口：

let routeData = this.$router.resolve({ path: '/home', query: {  id: 1 } });
window.open(routeData.href, '_blank');
1
2

总结

1、传参可以使用params和query两种方式。
2、使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。