关于ts + vue 的一个路由跳转问题

Question

我先描述下现象：
我按照如下代码配置了路由表

import Vue from 'vue'
import Router from 'vue-router'
import {
  notFound,
  MainList,
  todoComponent1,
  todoComponent2,
  todoComponent3,
  MainPage
} from '../page/index'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path:'/',
      component: MainPage,
      redirect: '/mainList',
      children: [{
        path:'mainList',
        component: MainList
      },{
        path:'todoComponent1',
        component: todoComponent1
      },{
        path:'todoComponent2',
        component: todoComponent2
      },{
        path:'todoComponent3',
        component: todoComponent3
      }]
    },
    {
      path: '*',
      component: notFound
    }
  ]
})

children里面引入的4个二级路由都是不同的页面组件

这是实际的页面


路由并没有按照/mainList匹配到对应的组件，而是显示了notFound组件
在底部导航栏点击切换路由 router.push(url) hash部分会改变 但是页面中<router-view></router-view>部分也不会随着hash改变而改变

<el-col :span="6" :style="{color: curTab === 0 ? '#c42323':''}" @click.native="changeNav(0,'/mainList')">
                    <el-col><i class="el-icon-s-home"></i></el-col>
                    <el-col class="main-footer-nav">首页</el-col>
                </el-col>
                <el-col :span="6" :style="{color: curTab === 1 ? '#c42323':''}" @click.native="changeNav(1,'/todoComponent1')">
                    <el-col><i class="el-icon-s-home"></i></el-col>
                    <el-col class="main-footer-nav">二</el-col>
                </el-col>
                <el-col :span="6" :style="{color: curTab === 2 ? '#c42323':''}" @click.native="changeNav(2,'/todoComponent2')">
                    <el-col><i class="el-icon-s-home"></i></el-col>
                    <el-col class="main-footer-nav">三</el-col>
                </el-col>
                <el-col :span="6" :style="{color: curTab === 3 ? '#c42323':''}" @click.native="changeNav(3,'/todoComponent3')">
                    <el-col><i class="el-icon-s-custom"></i></el-col>
                    <el-col class="main-footer-nav">四</el-col>
                </el-col>

changeNav(index: Number, url: any): any {
        console.log(url)
        if(this.curTab !== index){
            this.curTab = index
            this.$router.push(url)
        }
    }

纠结了很久 还是没找到问题在哪里

Answer 1

routes: [
    {
      path:'/',
      component: MainPage,
    },
    {
      path: '/',
      component: MainPage,
      children: [{
        path:'mainList',
        component: MainList
      },{
        path:'todoComponent1',
        component: todoComponent1
      },{
        path:'todoComponent2',
        component: todoComponent2
      },{
        path:'todoComponent3',
        component: todoComponent3
      }]
    },
    {
      path: '*',
      component: notFound
    }
  ]