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

首先简单来说明一下$router和$route的区别

$router : 是路由操作对象，是一个实例，只写对象
$route : 路由信息对象，只读对象

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

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

• query 传参

//query传参，使用name跳转
this.$router.push({
    name:'hello',
    query: {
        queryId:'01',
        queryName: 'query'
    }
})

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

//query传参接收
this.queryName = this.$route.query.queryName
this.queryId = this.$route.query.queryId


路由
{
  path: 'hello',
  name: 'hello',
  component: hello
},

• param 传参

//params传参，使用name跳转
this.$router.push({
    name:'hello',
    query: {
        queryId:'01',
        queryName: 'query'
    }
})

//params传参接收
this.queryName = this.$route.params.queryName
this.queryId = this.$route.params.queryId


路由
{
  path: 'hello',
  name: 'hello',
  component: hello
},

注意：

• 既然 query 和 parmas 都可以使用name传参，那么最保险的是直接使用name传参，避免混乱
• 使用路由时最好将path 和 name 还有 component 定义成同样的名字，这样方便管理

可是有时候刷新页面的时候参数会消失，怎么回事呢，请查看下方链接中的文章

           https://blog.csdn.net/Rainbow1995/article/details/91435367