<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 }) },