$router 和 $route
$router
是Vue-router的路由实例,想要导航到不同的url,需要使用$router.push
方法$route
是当前router的跳转对象,可以获取到name、path、query、params
等信息
query
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;
生成的url
如图所示:携带?
的参数形式,并且包含参数的key
和value
params
params
传参,只支持name
的形式
//params传参 使用name
this.$router.push({
name:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
params
方式需要注意的是需要定义路由信息如:path: '/xx/:id/:name'
,这样才能进行携带参数跳转,否则url
不会进行变化,并且再次刷新页面后参数会读取不到
生成的url如图所示:只包含参数的value
,安全性相对较高
总结
- 接收参数的形式不一样,分别为
this.$route.query.id
和this.$route.params.id
query
支持path和name
两种形式,params
仅支持name
形式- 生成
url
的格式不同,query
产生的url带问号且包含参数的key和value
,params
仅携带参数的value
- 使用
params
需要将路由设置为path:/xx/:id/:name
的形式