范例

原理:想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

首先呢!先来描述一下这东西能干什么?这是路由的编程式导航,通过触发事件可以实现从一个页面跳转到另一个页面的功能(或者说是从当前路由导航到指定的URL),并且可以在跳转时携带参数。

第一步

配置好 路由文件(router文件夹下的index.js等文件)、接口文件(api文件夹下的一系列js文件,一般api文件夹下的文件和views文件夹下的文件名是一一对应的,方便页面对应接口)。

路由文件配置好之后,编程式导航才可以正常进行跳转,才能正常工作。

//范例中的路由文件,这里仅仅截取了一部分代码,这部分代码仅仅为本文中的范例服务,删除了非范例中的代码。

 // 基本信息
  {
    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
  })
}
第二步

在需要使用的地方引入方法,本范例中就是指公司列表页,而目标页面就是部门页。

image-20230629225307593

具体实现代码如下:

//公司列表页

// 列表中部门的点击按钮
<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 },
   });
}
第三步

当点击完部门按钮之后,就会来到了该公司的部门列表页。这就是一个整个流程

其运行截图如下:

image-20230629223901211

集体实现代码如下:

先理一下逻辑:部门列表页首先需要拿到包裹在路由中传过来的数据,对于本范例而言,就是需要拿到数据中的公司编号,然后在created() 生命周期函数中调用对应方法中的接口,把公司编号作为参数传给后端,然后后端根据公司编号在数据库表中去查询数据,最后把数据打包返回给前端,前端的部门列表页接收数据之后,再把数据展示到公司的部门列表页中。这样,我们一旦跳转进入部门列表页就会看到该公司的部门列表。

//部门列表页

//导入接口,这就是之前接口文件中定义的接口
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中的数据展示在表格中,就完成了。

保真"芝士"

好的,范例仅仅只是小试牛刀,不足挂齿;下面上正菜。

主要步骤

先做个主要步骤的总结

  1. 配置接口,配置路由文件
  2. 在需要使用的地方引入方法(触发事件)
  3. 在原页面中触发事件,把需要传给目标页面的数据塞进this.$router.push
  4. 在目标页面中从this.$route.query/param中取出数据,然后用取到的数据传给后端 …
this.$router.push()的参数规则

1、字符串路径

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

2、带有路径的对象

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

3、命名的路由,并加上参数,让路由建立 url

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

4、带查询参数,结果是 /register?plan=private

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

5、带 hash,结果是 /about#team

router.push({ path: '/about', hash: '#team' })
参数的接收

当我们使用params进行传参时,只需在接收参数的地方使用this.$route.params进行接收即可

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

当我们使用query传参时,只需在接收参数的地方使用this.$route.query进行接收即可,用法同上
!!!这里有一个小细节:$符号后面跟的是route不是router,跳转的时候 $后面跟的是router!!!

注意事项:

1、query传参的参数会带在url后边展示在地址栏(/home?user=david),params传参的参数不会展示到地址栏

2、this.$route.query(刷新页面后参数不会丢失),this.$route.params(刷新页面后参数会丢失),因此可以考虑使用本地存储解决这个问题。

3、如果提供了 pathparams 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path

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
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐