I am encountering some issues with the router in Vue.cli. My English skills are not the best, but I have provided my code and images for reference. Hopefully, this will help you understand the problems I am facing.
Here is my router/index.js:
import innerView1 from '@/components/mainViews/innerView1'
import innerView2_1 from '@/components/mainViews/innerView2_1'
import innerView2_2 from '@/components/mainViews/innerView2_2'
import innerView3_1 from '@/components/mainViews/innerView3_1'
import innerView3_2 from '@/components/mainViews/innerView3_2'
import innerView4 from '@/components/mainViews/innerView4'
Vue.use(Router)
export default new Router({
routes: [{
path: '/Home',
name:'Home',
component: Home,
children: [{
path: '/innerView1',
name: 'innerView1',
component: innerView1
},
{
path: 'innerView2',
name: 'innerView2',
children: [{
path: '/innerView2_1',
name: 'innerView2_1',
component: innerView2_1
},
{
path: '/innerView2_2',
name: 'innerView2_2',
component: innerView2_2
}
]
},
{
path: 'innerView3',
name: 'innerView3',
children: [{
path: '/innerView3_1',
name: 'innerView3_1',
component: innerView3_1
},
{
path: '/innerView3_2',
name: 'innerView3_2',
component: innerView3_2
}
]
},
{
path: '/innerView4',
name: 'innerView4',
component: innerView4
}
]
},
{
path: '/Login',
name: 'Login',
components: {
default: Login
}
}
]
})
Now, let's take a look at my Home.vue:
import Vue from 'vue';
export default {
name: "Home",
beforeCreate() {
},
data() {
return {
test: "test",
homeRoute:this.$router.options.routes[0],
routes: this.$router.options.routes[0].children,
router:this.$router
};
},
mounted() {
console.log(this);
},
};
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="217px">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu>
<el-submenu v-for='(item) in routes' :key="item.name" v-if="item.children" :index='item.name' >
<template slot="title" >
<i class="el-icon-message" ></i>{{item.name}}
</template>
<el-menu-item v-for='(child,index) in item.children' :key='child.name' :index='item.name+index.toString()' @click="router.push(child.path)">
{{child.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :key='item.name' :index='item.name' @click="router.push(item.path)" >
{{item.name}}
</el-menu-item>
</el-menu>
</el-aside>
</el-container>
</el-aside>
<el-container>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>
</el-footer>
</el-container>
</el-container>
</el-container>
</template>