vue 自定义跳转菜单

1.布局加样式

<div class="background_fff">
    <div class="background_fff padding_20px">
        <ul class="borderRight_e5e5e5">
            <li class="color_000000 fontSize_16px fontWeight_500">用户管理</li>
            <li class="marginTop_20px color_000000 fontSize_16px marginLeft_10px fontWeight_500" v-for="(item,index) in navList" :key="index" @click="goActive(item)" >
                <p :class="active === item.id && !item.children ? 'color_d72a21' :''">{{ item.title }}</p>
                <div v-if="item.children" class="marginLeft_20px marginTop_20px" :class="active !== item.id ? 'display_none' :'display_block'">
                    <div class="marginTop_20px" v-for="(it,idx) in item.children"  :key="idx"  @click="goActiveChild(item,it)" :class="activeChild == it.id ? 'color_d72a21' :''">{{ it.title }}</div>
                </div>
            </li>
        </ul>
    </div>
  </div>

2.js 数据加路由跳转

 export default {
    name: '',
    components: {},
    data () {
      return {
        activeName:2,
        active:'',
        activeChild:'',
        navList:[
            {
                id:2,
                title:"你的title",
                children:[
                    {
                        id:21,
                        title:"你的title",
                        path:'你的路由地址'
                    },
                    {
                        id:22,
                        title:"你的title",
                        path:'你的路由地址'
                    }
                ]
            },
            {
                id:3,
                title:"你的title",
                path:'你的路由地址'
            },
           
        ],
        activeIndex:''
      }
    },
    computed: {},
    watch: {},
    created () {
        this.activeIndex = this.$route.path;
        this.initActiveItem();
    },
    mounted () {
    },
    methods: {
        goActive(item) {
            this.active = item.id;
            if (item.path && this.$route.path !== item.path) {
                this.$router.push(item.path);
                this.activeChild=''
            }

        },
        goActiveChild(item, it) {
            if (it.path &&  this.$route.path !== it.path) {
                this.$router.push(it.path);
            }
            this.activeChild = it.id;
            this.active = item.id;
        },
        initActiveItem() {
            this.navList.map((item) => {
                if (item.path && item.path === this.activeIndex) {
                    this.active = item.id;
                    this.activeIndex = item.path;
                } else {
                    if (item.children) {
                        item.children.map((it) => {
                            if (it.path && it.path === this.activeIndex) {
                            this.active = item.id;
                            this.activeChild = it.id;
                            this.activeIndex = it.path;
                            }
                        });
                    }
                }
            });
        },
    }
  }