Vue-Router的params和query传参的使用和区别

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.属性名