路由路径没有写错啊，怎么不能跳转页面的？

Question

router/index.js：

 import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import ChartOne from '@/components/charts/stator/ChartOne.vue'
import ChartTwo from '@/components/charts/stator/ChartTwo.vue'
import ChartThree from '@/components/charts/stator/ChartThree.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    children: [
      { path: '/chartone', component: ChartOne },
      { path: '/charttwo', component: ChartTwo },
      { path: '/chartthree', component: ChartThree }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue:

 <template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
</style>

Home.vue:

<template>
  <div>
    <el-container>
      <el-header>可视化设计显示</el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

解决了，在路由那里配置了根路径重定向为/home

Answer 1

看起来是因为你的路由地址也就是 path 写错了，ChartOne、ChartTwo、ChartThree 的路径是 /chartone, /charttwo, /chartthree，而不是 /home/chartone 之类的。

检查一下你的 router-link 标签或者 $router.push 等函数内的 path 是否填写正确。