H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】关于ts + vue 的一个路由跳转问题

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

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个二级路由都是不同的页面组件

这是实际的页面
image.png
image.png
路由并没有按照/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)
        }
    }

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

回答:

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
    }
  ]

本文地址:H5W3 » 【前端问题精选】关于ts + vue 的一个路由跳转问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址