VUE包含多个router-view解决办法

爱coding的大尾巴

已于 2023-06-07 15:31:53 修改

阅读量1w

点赞数 12

文章标签： vue 前端框架前端

于 2022-07-05 15:23:44 首次发布

本文链接：https://blog.csdn.net/liguangxi123/article/details/125620635

版权

如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：

1，将router-view加入name属性。

<el-container >
  <el-tabs type="border-card" style="width: 99%;height: 99%"  @tab-click="handleClick">
    <el-tab-pane label="统计1">
      <router-view name="statistics1"></router-view>
    </el-tab-pane>
    <el-tab-pane label="统计2">
      <router-view name="statistics2"></router-view>
    </el-tab-pane>
    <el-tab-pane label="统计3">
      <router-view name="statistics3"></router-view>
    </el-tab-pane>
    <el-tab-pane label="统计4">
      <router-view name="statistics4"></router-view>
    </el-tab-pane>
  </el-tabs>
</el-container>

2，路由规则里面加入 components，使router-view加入name属性与页面对应。

{
	name:'statistics',
	path:'/rpa/statistics',
	component:StatisticsLayout,
	redirect: '/rpa/statistics/statisticsData1',
	children:[
		{
			name:'statisticsData1',
			path:'statisticsData1',
			components: {statistics1:() => import('@/view/portal/process/StatisticsData1.vue')},
			meta:{
				title:'统计1'
			},
		},{
			name:'statisticsData2',
			path:'statisticsData2',
			components: {statistics2:() => import('@/view/portal/process/StatisticsData2.vue')},
			meta:{
				title:'统计2'
			},
		},{
			name:'statisticsData3',
			path:'statisticsData3',
			components: {statistics3:() => import('@/view/portal/process/StatisticsData3.vue')},
			meta:{
				title:'统计3'
			},
		}, {
			name:'statisticsData4',
			path:'statisticsData4',
			components: {statistics4:() => import('@/view/portal/process/StatisticsData4.vue')},
			meta:{
				title:'统计4'
			},
		}
	]
},

3，将JS点击事件对应到路由规则的name属性

  methods:{
    handleClick(tab, event) {
      if(tab.index == '0'){
        this.$router.push({name:'statisticsData1'});
      } else if(tab.index == '1'){
        this.$router.push({name:'statisticsData2'});
      }else if(tab.index == '2'){
        this.$router.push({name:'statisticsData3'});
      }else if(tab.index == '3'){
        this.$router.push({name:'statisticsData4'});
      }
    }
  },

这样，每次tab切换加载页面时，只加载对应页面的接口。