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

Question

这是main.js
importVuefrom'vue'
importVueRouterfrom'vue-router';
importAppfrom'./App'
importRoutesfrom'./router'
Vue.use(VueRouter)
letrouter=newVueRouter({
Routes
})
newVue({
router,
render:h=>h(App)
}).$mount("#app")
这是App.vue
这是router/index.js
importVuefrom'vue'
importRouterfrom'vue-router'
importgoodsfrom'@/components/goods/goods'
importcommentfrom'@/components/comment/comment'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/comment',
name:'comment',
component:comment
},
{
path:'/goods',
name:'goods',
component:goods
}
]
})
这是组件
请问为什么App.vue的内容出现，App.vue的router-link点击地址也跳转，但是router-view不能渲染出组件中的内容

Answer 1

楼主，你好~main.js里的写法有问题。改成下面的试试//这是main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'newVue({//这里引用的就是你router.js实例化好的对象router,render:h=>h(App)}).$mount("#app")

Answer 2

你在router/index.js已经导出newRouter;就已经不需要在main.js进行，所以直接删除这部分代码letrouter=newVueRouter({Routes})下面修改为这样newVue({Routes,render:h=>h(App)}).$mount("#app")----补充exportdefaultnewRouter({routes:[{path:'/comment',name:'comment',component:comment},{path:'/goods',name:'goods',component:goods}]})修改为exportdefaultnewRouter({[{path:'/comment',name:'comment',component:comment},{path:'/goods',name:'goods',component:goods}]})