vue 路由跳转 url更新了 但是视图没变

Question

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

routes: [
    {
      path:'/',
      component: () => import('../page/main.vue'),
      redirect: 'mainList',
      children: [{
        path:'mainList',
        component: () => import('../page/MainList.vue')
      },{
        path:'todoComponentA',
        component: () => import('../page/todoCom1.vue')
      },{
        path:'todoComponentB',
        component: () => import('../page/todoCom2.vue')
      },{
        path:'todoComponentC',
        component: () => import('../page/todoCom3.vue')
      }]
    }
  ]

这是点击导航栏【二】后的url

但是二级路由的视图中 123 显示的还是【首页】tab的内容

底部导航栏点击切换路由触发 router.push(url)
url会改变 但是页面中<router-view></router-view>不会随着url改变而改变

        <el-main class="main-content">
            <transition name="slide-right">
                <router-view></router-view>
            </transition>
        </el-main>
        <el-footer class="main-footer">
            <el-row>
                <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,'todoComponentA')">
                    <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,'todoComponentB')">
                    <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,'todoComponentC')">
                    <el-col><i class="el-icon-s-custom"></i></el-col>
                    <el-col class="main-footer-nav">四</el-col>
                </el-col>
            </el-row>
        </el-footer>

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

PS:编辑下 相同代码我用vue-cli重新搭了个普通的vue项目 路由跳转正常。但是在ts + vue环境下跳转就是有问题 代码层面 路由表、跳转事件触发应该都是一致的 希望有大神帮忙解惑

Answer 1

1.更改模式
vue-router HTML5 History 模式  可以设置为history 模式解决问题

2.hash模式解决方案

mounted () {
  // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
  window.addEventListener('hashchange', () => {
    let currentPath = window.location.hash.slice(1)
    if (this.$route.path !== currentPath) {
      this.$router.push(currentPath)
    }
  }, false)
}

Answer 2

怀疑是没有写/的原因

Answer 3

你把children里面的东西放出来，互相独立，试下效果。

Answer 4

有时候目标页面有语法问题，也是这种现象，可以检查下

Answer 5

用vuejs-devtools 插件在chrome里面调试看下，<router-view></router-view>渲染成什么了，没有变化，肯定页面有报错