最近在做后台管理系统，发现有个页面如下：
由于我对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]);
},