做了一个简单的项目，但是<router-view></router-view>不能渲染，代码如下： App.vue

<template>
  <div id="app">
    <e-header></e-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import header from './components/header/header.vue'
export default {
  name: 'app',
  components: {
    'e-header': header
  }
}
</script>

<style lang="stylus" rel="stylesheet/syulus">
  #app 
    font-family: 'Microsoft Yahei'
    .tab
      width: 100%
      display: flex
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center

  
</style>

goods.vue

<template>
	<div>goods content</div>
</template>
<script>
	export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus">
	
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Goods from './components/goods/goods.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

const Seller = {
  template: '<p>seller</p>'
}

const Ratings = {
  template: '<p>ragings</p>'
}

const routes = [
  {
    path: '/goods',
    template: Goods
  },
  {
    path: 'seller',
    template: Seller
  },
  {
    path: 'ratings',
    template: Ratings
  }
]

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: {App},
  router
})

现在的效果是，点击导航可以切换，但是router-view不能渲染。