【VUE点击跳转页面并传参到另一个页面】

在当前页面我需要点击设备详情并进行跳转到详情页面，并展示此设备的一些基本信息，因为设备的编号是唯一标识，所以需要拿到设备编码传到详情页，就用到了点击跳转页面并传参

---

• 下面截图标注的地方就是需要触发的点击事件
  

• 然后在 methods 下将点击事件添加，代码如下：

• 其中name是路由，query是参数

 /** 设备详情按钮 */
    handleEditDevice(item) {
      /*完成页面跳转，待优化*/
      this.$router.push({
        name: 'XXXXX',
        query: {
          item: item,
          pageNum: this.queryParams.pageNum
        }
      });
    },

• 接下是需要接受参数的页面

    // 获取设备信息
    let item = this.$route.query.item;
    let pageNum= this.$route.query.pageNum;

以上即可解决跳转并参数的问题，顺便说一下在上面用的跳转时this.$router.push和接受时this.$route.query的作用

1. $router在这里其实是相当于一个全局的路由器对象，作用是进行路由跳转的！就像jQuery里的window.location一样，起到的是导航的作用，里面含有很多属性和子对象。
2. 路由的实例方法：就像上面我所贴出的代码那样

---

1. $route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等数据
2. 在后台输出一下this.$route如下

    let item = this.$route.query.item;
    console.log(this.$route)

3. 可以看到跳转时传来的路由就在里面，其中query是一个key/value对象，表示URL查询参数，例如：对于路径 /foo?user=1,则有route.query.user == 1， 如果没有查询参数，则是个空对象。