1.首先简单来说明一下$router
和$route
的区别
- $router : 是路由操作对象,只写对象
- $route : 路由信息对象,只读对象
//路由跳转分为编程式导航和声明式导航
//编程式路由跳转
this.$router.push({
name:'hello',
params:{
name:'word',
age:'11'
}
})
//声明式路由导航
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
//路由map配置
routes:[
{
path:'/index',
component:index
},
{
path:'/category/:id',//如果是query传参的话后面就不要加id了
component:category
}
]
//读取 路由参数接收
this.name = this.$route.params.name;
2.query传参
//使用name跳转
this.$router.push({
name:'second',
query: {
name:'user'
}
})
//使用path跳转
this.$router.push({
path:'second',
query: {
name:'user'
}
})
//query传参接收
this.queryName = this.$route.query.name;
3.params传参
使用params传参只能使用name
//params传参 使用name
this.$router.push({
name:'second',
params: {
id:1,
}
})
//params接收参数
this.id = this.$route.params.id ;
总结:
1.params只能通过name来实现跳转,query可以通过name跳转也可以通过path跳转;
2.params配置路由的时候需要参数,否则会路由丢失,而query不需要配置路由参数,每次刷新都不会丢失;
3.路由取值:this.$route.params.属性名