Vue页面跳转两种方式区别

之前一直使用组件之间使用跳转，但是发现了别的方式传递参数，这里讲方式总结一下然后说一下优缺点。

组件方式

首先在页面上面显示组件详情

<next-node-approved ref="nextNodeApproved" @func="passTask()" v-if="nextNodeApprovedVisible">

这里就是组件的详情
然后将组件引入

import nextNodeApproved from '../components/next-node-approved' // 下一个审批人

使用import直接引入，通过找到制定的配置路径
然后是组件的显示

  components: {
    SendDuplicate,
    HistoryData,
    addressBook,
    nextNodeApproved
  },

然后在将组件的名称在component显示出来
这样就可以将这个组件显示出来

路由

还有的方式就是通过路由的方式

<van-button type="primary" size="mini" plain color="#4083f6" @click="checkImage(site)">查看</van-button>

在这里使用方法

// 附件
    checkImage (item) {
      console.log(item)
      var self = this
      this.taskId = this.$route.params.taskId
      this.proDefId = this.$route.params.proDefId
      this.proInstanceId = this.$route.params.proInstanceId
      this.pageTypeNumber = this.$route.params.pageTypeNumber
      this.activetabs = this.$route.params.activetabs
      this.pageType = this.$route.params.pageType
      this.$router.push({
        name: 'reimInneraccountbillPhone-image',
        params: {
          taskId: self.taskId,
          proDefId: self.proDefId,
          proInstanceId: self.proInstanceId,
          pageTypeNumber: self.pageTypeNumber,
          activetabs: self.activetabs,
          pageType: self.pageType,
          imageName: item.fileName,
          imageSrc: item.fileId
        }
      })
    },

在这里使用this.$router.push将路由传递，然后通过this.$route.params.taskId将参数传递，
这样既可以将参数进行传递

优点

路由：

当你是用来路由的时候，不会因为组件的地址在使用的时候出现问题，有一些代码可以复用但是我们还是需要将代码复制一遍，于是就是会出现路径的问题，然后通过路由的话只是需要在路由中配置一下，直接配置路由即可

组件：

组件的话就是需要不需要传递通过传递json串的形式传递数据，可以在主页面调用子页面的函数即可，将参数传递进去即可

其实这两者从根本上来说其实是一样的，但是有几点需要注意。

• 如果是使用组件形式，就需要import的时候将组件通过绝对路径的形式
• 如果使用的是路由的方式，则需要注意参数的名称，不要传递参数传递错了