路由传参以及跳转:
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
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
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')
}
this.$router.resolve跳转路由打开新窗口:
let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });
window.open(routeData.href, '_blank');
总结
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请求,参数不会再地址栏中显示。