需求是跳转至工单申请详情页面

vue.js中路由配置代码： 

import Layout from '@/layout'

const repairRouter = {
  path: '/repair',
  component: Layout,
  alwaysShow: true,
  redirect: '/repair/my-repair-order',
  name: 'repair',
  meta: {
    title: '工单管理',
    icon: 'clipboard',
    perms: ['repair']
  },
  children: [
    {
      path: 'create-repair',
      name: 'createRepair',
      hidden: true,
      component: () => import('@/views/process/repair/repairCreate.vue'),
      meta: {
        title: '新建工单申请',
        perms: ['create-repair']
      }
    },
    {
      path: 'my-repair-order',
      name: 'myRepairOrder',
      noShowingChildren: true,
      component: () => import('@/views/process/repair/myRepairOrder.vue'),
      meta: {
        title: '我申请的工单',
        perms: ['repair-order']
      }
    },
    {
      path: 'repair-order-detail',
      name: 'repairOrderDetail',
      component: () => import('@/views/process/repair/myRepairOrderDetail.vue'),
      meta: {
        title: '工单申请详情',
        perms: ['repair-order-detail'],
        hidden: true
      }
    }

  ]
}
export default repairRouter

1.this.$router.push() (函数里面调用)

1. 不带参数

this.$router.push('/repair/repair-order-detail')
this.$router.push({name:'repairOrderDetail'})
this.$router.push({path:'/repair/repair-order-detail'})

2. query传参 

参数为属性值：

//其中参数deviceId可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',query: {deviceId: row.id}})
this.$router.push({path:'/repair/repair-order-detail',query: {deviceId: row.id}})

参数为对象：

//其中参数data可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',query: {data: row}})
this.$router.push({path:'/repair/repair-order-detail',query: {data: row}})



// html 取参  $route.query.deviceId/data
// script 取参  this.$route.query.deviceId/data

3. params传参 

参数为属性值：

//其中参数deviceId可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',params: {deviceId: row.id}})

参数为对象：

//其中参数data可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',params: {data: row}})


//此处只能用name，用path接收不到参数

// 路由配置 path: "/repair-order-detail/:id" 或者 path: "/repair-order-detail:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

//参数为对象时原理同上，但是要注意，对象传参的话，需要先JSON.stringify(row)处理之后再传，否则再次刷新会丢失数据
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id

query和 params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

4. 直接路径传参 

// 此时路由必须配置为 path: "/repair-order-detail/:id" 
// 不能为 path: "/repair-order-detail:id" 或者 "/repair-order-detail"会报400错误 
this.$router.push(`/repair/repair-order-detail/${row.id}`)
this.$router.push('/repair/repair-order-detail/' + row.id)
this.$router.push(`/repair/repair-order-detail/` + row.id)


//此处也可以传对象，但是传对象之前需要将对象转成JSON格式的字符串


// html 取参  $route.params.id
// script 取参  this.$route.params.id

2.this.$router.replace() (用法同上,push) 

3.this.$router.go(n)

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

VUE几种路由跳转几种方式的区别

this.$router.push：跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数

附：

路由跳转之后可以通过watch监听（新增编辑共用一个页面）： 

列表页面：

新增编辑页面：

const defaultFrom = {
        devicePandect: {
          constructionProject: '',
          area: {},
          spot: {},
          coordinate: {}
        },
        shiJuPlatformNumber:'',
        reportFormNumber:''
}

data() {
    return {
      captureEquipmentInfo: {
        devicePandect: {
          constructionProject: '',
          area: {},
          spot: {},
          coordinate: {}
        }
      },
    }
},

watch: {
    // watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。
    // 监听路由是否发生变化
    $route(to, from) {
      // 当监听的路由这个方法执行的时候，我们是不是判断此路由过来的参数是否存在，
      // 如果不存在，那就说明是新增     如果存在那么说明修改过来的
      this.init()
    }
  },

created() {
    // 在加载的时候执行了这个方法，可以调用这个根据ID来插叙的方法      执行此方法、获取我们的参数
    this.init()
  },

methods: {
    init() {
      // 判断是否有参数
      if (this.$route.params && this.$route.params.id) {
        // 当加载页面的时候就要获取参数的值了
        this.selectById(this.$route.params.id)
      }else{
        // 没有参数  清空  可以用浅拷贝
        this.captureEquipmentInfo = { ...defaultFrom}
      }
    },
    selectById(id) {
       //调用后端查询接口
      selectCaptureEquipmentById(id).then(res => {
        if (res.success) {
          this.captureEquipmentInfo = res.item
            //上传文件列表回显
          if (this.captureEquipmentInfo.devicePandect && this.captureEquipmentInfo.devicePandect.enclosure) {
            this.fileList = JSON.parse(this.captureEquipmentInfo.devicePandect.enclosure)
          }
        }
      }).catch(res => {
        this.$message({
          message: '获取数据失败,' + res.message,
          type: 'error'
        })
      })
    },
}