vue中的this.$router.push()路由传值方式

//范例中的路由文件,这里仅仅截取了一部分代码，这部分代码仅仅为本文中的范例服务，删除了非范例中的代码。
 // 基本信息
  {
    path: "/basics",
    component: Layout,
    redirect: "/basics/company",
    name: "Basics",
    meta: {
      title: "基本信息",
      icon: "excel",
    },
    children: [
      // 公司列表-所有公司的列表
      {
        path: "company",
        component: (resolve) => require(["@/views/basics/company/index"], resolve),
        name: "Company",
        meta: { title: "公司列表" },
      },
    ],
  },
 // 公司列表中的按钮
  {
    path: "/basics/company",
    component: Layout,
    redirect: "/basics/company",
    meta: {
      title: "公司列表",
    },
    children: [
      // 部门列表——具体某一个公司的部门列表，而不是全部
      {
        hidden: true,
        path: "companydep",
        component: (resolve) => require(["@/views/basics/company/depart"], resolve),
        name: "Companydep",
        meta: { title: "部门列表" },
      }
    ]
  },

// 这里仅仅截取公司部门页（也就是 目标页面）所用到的接口文件，仅用于辅助理解
//接口需要通过封装之后的axios发给后端，一般来说，封装的axios中都会有请求拦截器以及相应拦截器
// 部门接口
//部门列表
export function departList(query) {
  return request({
    url: '/admin/depart',
    method: 'get',
    params:query
  })
}
//部门添加
export function addDepart(data) {
  return request({
    url: '/admin/depart',
    method: 'post',
    data:data
  })
}

//公司列表页
// 列表中部门的点击按钮
<el-button type="info" size="mini" @click="depatt(scope.row)">部门</el-button>

//部门按钮点击触发事件，传过去的值是公司的编号以及公司名称
depatt(row) {
   this.$router.push({
   name: "Companydep",
   params: { id: row.company_no, companyname: row.name },
   });
}

//部门列表页
//导入接口，这就是之前接口文件中定义的接口
import {
  departList,
  addDepart,
  deldepart,
  updateDepart,
} from "@/api/commpy/firm";
//生命周期函数
  created() {
    // 获取传过来的数据，并赋值给本页面中的数据
    if (this.$route.params.id) {
      this.form.company_no = this.$route.params.id;
      this.queryParams.company_no = this.$route.params.id;
      this.queryParams.company_name = this.$route.params.companyname;
      this.getList();
    }
  }
//获取部门列表的方法
getList() {
      departList(this.queryParams).then((res) => {
        this.tableData = res.data.data;
        this.myPages.total = res.data.total;
        this.myPages.pageSize = res.data.per_page;
        this.myPages.pageNum = res.data.last_page;
      });
    }
//最后，把tableData中的数据展示在表格中，就完成了。

//  路径/home对应router目录下index.js中定义的path属性值
this.$router.push('/home');

//  对应router目录下index.js中定义的path
this.$router.push({path:'/home'});

// name对应router目录下index.js中定义的name  params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});

// 带查询参数，传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

router.push({ path: '/about', hash: '#team' })

//传参
this.$router.push({name:'Home',params:{user:'david'}});
// 在name为Home的组件中接收参数
const id=this.$route.params.id;
console.log(this.$route.params);//打印结果为{user:'david'}

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user