vue点击跳转和其他页面获取此页面传递的参数

<div class="card-panel" @click="handleSetLineChartData('unTotal')">

传递参数：

methods: {
    handleSetLineChartData(type) {
      if (type === 'userTotal') {
        this.$router.push({
          path: 'power/user',
          name: 'user'
        })
      }
      if (type === 'unTotal') {
        this.$router.push({
          path: '/pig/blockChain',
          name: 'blockChain',
          params: {
            state: '0'
          }
        })
      }
      if (type === 'suTotal') {
        this.$router.push({
          path: '/pig/blockChain',
          name: 'blockChain',
          params: {
            state: '1'
          }
        })
      }
      if (type === 'erTotal') {
        this.$router.push({
          path: '/pig/blockChain',
          name: 'blockChain',
          params: {
            state: '2'
          }
        })
      }
    }
  }
....

其中：

name：是router/index.js中的（菜单配置）

{ path: 'blockChain', component: _import('pig/blockChain'), name: 'blockChain', meta: { title: '区块链信息', noCache: true }}

接收：

methods: {
      getParams() {
        // 取到路由带过来的参数
        const routerParams = this.$route.params.state
        console.log(routerParams)
        // 将数据放在当前组件的数据内
        this.listQuery.state = routerParams
      },

watch: {
      // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
      '$route': 'getParams'
    }

加载列表的方法：

getList() {
        this.getParams()
        this.listLoading = true
        listCollect(this.listQuery).then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },