Vuejs writes a tree-like secondary menu and adds a path path, which leads to the wrong address wheel.

< template >

<div class="slide">
    <div v-for="(item,index) in list" class="slide-wrap"  @click="showList(item)">

        <router-link class="title"  tag="div"  :to="{ path: item.path }">
            <i :class="icons[index]" class="icons"></i>
                {{item.title}} 
            <i class="icon-ml el-icon-arrow-right" v-if="item.children"></i>
            <!-- <i v-show="item.isShow" class="el-icon-arrow-down icon-ml"></i> -->
        </router-link >
        
    
        <div v-if="item.children" v-show="item.isShow" >
            <div class="title1" v-for="items in item.children" >{{items.title}}</div>
        </div>
        
        
    </div>
</div>

< / template >

< script >

export default{
    name:"HomeSlide",
    data(){
        return {
            list:[
                {
                    id:0,
                    isShow: false,
                    title:"",
                    path: "person"
                },
                {
                    id:3,
                    isShow: false,
                    title:" ",
                    path: "table"
                },
                {
                    id:4,
                    title:" ",
                    isShow: false,
                    rightTir: true,
                    path: "explame",
                    children:[
                        {
                            id: 0,
                            title: "form",
                            path: "form"
                        },
                        {
                            id: 1,
                            title: "",
                            path: "edit"
                        }
                    ]
                }
            ]
            
        }
    },
    methods: {
        showList(item){
            console.log( this.$route.path )
            if( item.children ){
                item.isShow = !item.isShow
            }    
            
        }
    }
    
}

< / script >

The

code is a group of pictures: main.js. When I click on a child route without children, the address is normal, but when I click on a child route with children, the address is messed up, like this

http://localhost:8080/index/table  
http://localhost:8080/index/person  


http://localhost:8080/index/explame/form
    
http://localhost:8080/index/explame/table