Vue页面间跳转传参（$router方式跳转），并解决input框(带v-model)传值后不可输入内容的问题

我自己也搜到了许多Vue间的页面跳转方式，但是也踩过不少坑，在这里总结一下

这段时间在做一个设备管理系统，点击修改按钮去修改某一个设备的信息时，由于一个dialog可能放不下设备的全部信息，所以单独制作了一个修改信息的页面，就会涉及页面跳转。

首先放一下参考链接：vue的页面跳转方式和传值、取值

这个是设备列表，我将修改ID=14的设备信息

点击修改按钮的函数如下：

控制台也会打印出结果：

可以在图片右上角看到文件名为“DeviceInfomation.vue”

下面将进行页面跳转

因为之前用过 this.$router.push(’/’)进行跳转，但是没有涉及传参，所以在一开始没有想到运用这个方法。

百度到的参考链接里运用this.$router.path

然后试了一下，发现：

amazing啊！

索性放弃，还是回归到 this.$router.push(’/’)

页面跳转和信息传递成功，终于完成了一半，接下来就是目标页面接受传递的参数，运用this.$route.query（因为我传递用的query）

可以看到，接受参数成功，下面是目标页面接受参数的方法：

第一步，Vue页面间跳转传参问题解决，接下来将面临input框(带v-model)传值后不可输入内容的问题

<el-form
            :model="form"
            ref="form"
            label-position="left"
            :rules="rules"
          >

这是我的表单数据，input值双向绑定在form中，目标页面接收到发送页面传来的参数后，成功将信息填入input框，以方便操作人员修改，但是，当我点击input框修改信息时，发现根本输入不进去，想来想去，想到了input框由于设置了v-model，如果它对应的值没定义，就会找不到双向绑定的对象，input框自然就会禁止输入。

解决方法：

export default {
  data() {
    return {
      form: {},
      }
   },
}

改为

export default {
  data() {
    return {
      form: {
        name: "",
        brand: "",
        type: "",
        deviceNo: "",
        crux: "",
        clazz: "",
      },
}

将input框涉及的对象预定义一下就好