vue+antd——使用router-view来实现菜单级组件的跳转

最近在做后台管理系统，发现有个页面如下：

由于我对vue的路由部分不是很熟悉，因此下面将以上对应的代码进行整理，慢慢积累知识点。

1.tabs标签部分

对应的代码：

<a-tabs :active-key="activeKey" @click="handleClickTab" :animated="false">
  <a-tab-pane :key="0" tab="客户档案"> </a-tab-pane>
  <a-tab-pane :key="1" tab="项目管理"> </a-tab-pane>
  <a-tab-pane :key="2" tab="零件"> </a-tab-pane>
  <a-tab-pane :key="3" tab="报价"> </a-tab-pane>
  <a-tab-pane :key="4" disabled tab="DCC"> </a-tab-pane>
  <a-tab-pane :key="5" disabled tab="销售订单"> </a-tab-pane>
  <a-tab-pane :key="6" disabled tab="交付计划"> </a-tab-pane>
  <a-tab-pane :key="7" disabled tab="仓库"> </a-tab-pane>
  <a-tab-pane :key="8" disabled tab="生产"> </a-tab-pane>
  <a-tab-pane :key="9" disabled tab="物流"> </a-tab-pane>
  <a-tab-pane :key="10" disabled tab="法务管理"> </a-tab-pane>
  <a-tab-pane :key="11" disabled tab="财务结算"> </a-tab-pane>
</a-tabs>
<router-view></router-view>

1. active-key:当前选中的tab标签
2. animated:是否有切换标签的动画
3. a-tab-pane中的：key对应active-key，如果相等，则选中当前。 tab是标签内容，disabled 是否禁用

2.监听click点击事件

data(){
	return{
		activeKey:null,
		tabsRouteMap:[],
		companyCode:'',
		tabsRouteMap:[]
	}
},
activated(){
	const { companyCode, type } = this.$route.query;
    sessionStorage.setItem("khCompanyCode", companyCode || this.companyCode);
    if (companyCode != this.companyCode) {
      this.companyCode = companyCode;
      this.activeKey = 0;
    }
    const queryString = `?companyCode=${companyCode}`;
    this.tabsRouteMap = [
      { path: `customerEdit${queryString}`, key: "customer" },
      { path: `project${queryString}`, key: "project" },
      { path: `product${queryString}`, key: "product" },
      { path: `offerAdd${queryString}`, key: "offerAdd" },
    ];
    const arr = this.$route.path.split("/");
    const path = arr[arr.length - 1];
    this.tabsRouteMap.forEach((item, index) => {
      if (path.startsWith(item.key)) {
        this.activeKey = index;
      }
    });
    this.getInfo();
},
getInfo(){
	//获取详情接口
},
handleChangeTab(v) {
  this.$router.push(this.tabsRouteMap[v]);
},
handleClickTab(v) {
  const innerText = v.target.innerText;
  const clickMap = {
    客户档案: 0,
    项目管理: 1,
    零件: 2,
    报价: 3,
  };
  this.handleChangeTab(clickMap[innerText]);
},

知识点：<router-view></router-view>用于展示路由页面内容

完成！！！多多积累，多多收获！！！