vue路由中router-link能跳转地址但是router-view不能渲染

Question

这是main.js

import Vue from 'vue'
import VueRouter from'vue-router';
import App from './App'
import Routes from './router'

Vue.use(VueRouter)

let router = new VueRouter({
    Routes
})
new Vue({
    router,
    render:h=>h(App)
}).$mount("#app")

这是App.vue

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/comment">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
   
    </div>
      <router-view></router-view> 
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
</div>
</template>

这是router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods/goods'
import comment from '@/components/comment/comment'
Vue.use(Router)

export default new Router({
  routes:[
    {
      path: '/comment',
      name: 'comment',
      component:comment
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    }
  ]
})

这是组件

<template>
    <div>I am goods</div>
</template>
<script type="text/script"></script>
<style lang="stylus" rel="stylesheet/stylus"></style>

请问为什么App.vue的内容出现，App.vue的router-link点击地址也跳转，但是router-view不能渲染出组件中的内容

Answer 1

楼主，你好~
main.js 里的写法有问题。改成下面的试试

// 这是main.js
import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
    // 这里引用的就是你 router.js 实例化好的对象
    router,
    render:h=>h(App)
}).$mount("#app")

Answer 2

你在router/index.js 已经导出new Router;
就已经不需要在main.js 进行，所以直接删除这部分代码

let router = new VueRouter({
    Routes
})

下面修改为这样

new Vue({
    Routes,
    render:h=>h(App)
}).$mount("#app")

----补充

export default new Router({
  routes:[
    {
      path: '/comment',
      name: 'comment',
      component:comment
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    }
  ]
})

修改为

export default new Router({
  [
    {
      path: '/comment',
      name: 'comment',
      component:comment
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    }
  ]
})