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

Question

兄弟问题链接：https://segmentfault.com/q/10...默认展示 首页 文字点击分类 组件内容不显示http://localhost:8080/Fenapp.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.jsimport 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