VueRouter中params和query的区别

query (查询) 和 params (参数) 两者都是在 vue 路由中传递参数
query 用 path 属性引入，params 用 name 属性引入

query 传递参数和接收参数：

// 传参
this.$router.push({
    path: '/userList',
    query: {
        id: id
    }
})

// 接收参数
this.$route.query.id

传递参数使用 this.$router，接收参数使用 this.$route
$router 是 VueRouter 实例，$route 是当前 router 跳转的对象
导航到不同 url 使用 this.$router 的（push、go、replace）方法去切换路由

params 传递参数和接收参数

//传参: 
this.$router.push({
    name:'/userList'
    params: {
        id: id
    }
})
  
//接收参数:
this.$route.params.id

<div id="app">
  <h1>Hello App!</h1>
  <div>
    <!-- 使用 router-link 组件来导航 -->
    <!-- 通过传入 `to` 属性指定链接 -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- tag 属性可以自定义标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
  <router-view></router-view>
</div>

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active 

返回上一级页面

this.$router.go(-1)

案例：表格中修改页面跳转（模拟）

<template>
  <section>
    <el-table :data="tableData">
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleModify(scope.$index, scope.row, $event)">修改</el-button>
          <el-button @click="handleDelete(scope.$index, scope.row, $event)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  </section>
</template>

<script lang="ts">
  export default {
    methods: {
      // 表格行修改页面
      handleModify(index: any, row: { appId: any }) {
        this.$router.push({
          path: '/addSystem',
          query: {
            appId: row.appId
          }
        })
      }
    }
  }
</script>

// 跳转后的页面
<script lang="ts">
  export default {
    created() {
      this.getSystemInfo()
    },
    methods: {
      getSystemInfo() {
        businessService.getInfoById({appId: this.$route.query.appId}).then(res => {
          this.systemValidateForm = res.data
        })
      }
    }
  }
</script>

VueRouter 官方文档 https://router.vuejs.org/zh/