vue-router路由的传参方式params query

一、vue-router路由的传参方式params query

1.$router 和 $route的区别

$router : 路由操作对象、操作路由、包括路由的跳转方法，钩子函数等、只写对象;

$route : 路由信息对象、获取路由信息、包括path，params，hash，query，fullPath，matched，name等路由信息参数、只读对象;

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

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.param.age;

2.query传参

• path配合

• 刷新页面参数不丢失

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

//query传参接受
this.quertId = ths.$route.query.queryId
this.queryName = this.$route.query.queryName 

3.params传参

• 和name配合

• 刷新页面参数会丢失

//params传参，使用name
this.$router.push({
    name:'second',
    params:{
        Id:'20230129',
        Name:'Emma'
}
)}

//query传参接受
this.Id = ths.$route.params.Id
this.Name = this.$route.params.Name 

//路由
{
path:'/second/:id/:name',
name:'second',
component:() => import('@/view/second')
}