vue 路由跳转地址栏参数改变了，对应组件内容没了

Question

兄弟问题链接：https://segmentfault.com/q/10...
默认展示 首页 文字

点击分类 组件内容不显示
http://localhost:8080/Fen

app.vue

<template>
  <div id="app">
    <Header></Header>

    <div class="main">
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
    </div>
    
    <Footer></Footer>
  </div>
</template>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Fen from '@/components/Fen'
import Cart from '@/components/Cart'
import Center from '@/components/Center'
Vue.use(Router)

export default new Router({
  mode: 'history',
  watch: {  
  '$route' (to, from) {  
    // data数据操作  
  }  
} ,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/',
      name: 'Fen',
      component: Fen
    },
    {
      path: '/',
      name: 'Cart',
      component: Cart
    },
    {
      path: '/',
      name: 'Center',
      component: Center
    }
  ]
})

Answer 1

url中的地址为/Fen
然而你的注册路由中的Fen组件的地址为

{
    path: '/',
    name: 'Fen',
    component: Fen
}
// 改为
{
    path: '/Fen',
    name: 'Fen',
    component: Fen
}

即可

Answer 2

你的path不对啊，全是/
应该根据不同的路径写不同的path