Vue路由，关于地址栏没有问题，router-view是一片空白

首先看源代码

目录结构如下：

App.vue

   			 <template>
   			  <div id="app">
   			
   			   <router-view></router-view>
   			
   			  </div>
   			</template>
   			
   			<script>
   			export default {
     
   			 
   			}
   			</script>
   			
   			<style>
   			
   			</style>

Home.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default{
     

}; 

</script>
<style>

</style>

User.vue

<template>
    <div>
        用户
    </div>
</template>

<script>
export default{
     

}; 

</script>
<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

import Home from './view/Home'
import User from './view/User'

new Vue({
     
  router: new VueRouter({
     
    routes: [{
     
        path: '/',
        component: {
     
          Home
        }
      },
      {
     
        path: '/user',
        component: {
     
          User
        }
      }
    ]
  }),
  render: h => h(App),
}).$mount('#app')

报错如下：

最终的原因还是多加了一对括号
在main.js里面

 	{
     
        path: '/user',
        component:User
     }

总结：敲代码还需细心啊

第二种：
router 和 router.beforeEach搭配使用，

router.beforeEach((to,from,next)=>{
     
    next()  //一定要有next
})

to 要到什么地方去，from 从哪里离开，next 决定要不要走(必须要有）,to,from可以省略