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组件的地址为{&nbsp; &nbsp; path: '/',&nbsp; &nbsp; name: 'Fen',&nbsp; &nbsp; component: Fen}// 改为{&nbsp; &nbsp; path: '/Fen',&nbsp; &nbsp; name: 'Fen',&nbsp; &nbsp; component: Fen}即可

Answer 2

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