Vue3项目启动后显示空白，控制台 vue-router.mjs:2959 Uncaught Error: Provide the “history“ option when calling 错误

        初学Vue时，遇到项目启动显示空白页面。梳理下面过程。

1. 项目目录结构
2. index.js

   // 1.引入路由依赖
   import {createRouter, createWebHistory} from 'vue-router'
   
   const routes = [
       {
           name:'login',
           path:'/login',
           component:() => import('../views/Login.vue')
       },
       {
           name:'helloworld',
           path: '/',
           component:()=>import('../components/HelloWorld.vue')
       }
   ]
   
   // 4.创建路由对象
   const router = new createRouter({
       // 去掉路由 #
       mode:createWebHistory(),
       routes,
   })
   
   // 5.导出router
   export default router

3. main.js

   // 1.引入路由依赖
   import {createRouter, createWebHistory} from 'vue-router'
   
   const routes = [
       {
           name:'login',
           path:'/login',
           component:() => import('../views/Login.vue')
       },
       {
           name:'helloworld',
           path: '/',
           component:()=>import('../components/HelloWorld.vue')
       }
   ]
   
   // 4.创建路由对象
   const router = new createRouter({
       // 去掉路由 #
       mode:createWebHistory(),
       routes,
   })
   
   // 5.导出router
   export default router

4. App.vue

   <template>
     <router-view/>
     <div>
       <router-link to="/">首页 </router-link>
       <router-link to="/login"> 登录页面</router-link>
     </div>
   
   </template>
   
   <script>
   
   
   export default {
     name: 'App',
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

5. login.vue

   <template>
     <div id="login_header">欢迎登录</div>
     <div id="login_container">
       <el-form :model="form" label-width="120px">
         <el-form-item label="用户名">
           <el-input v-model="form.username" />
           </el-form-item>
         <el-form-item label="密码">
           <el-input v-model="form.password" type="input" placeholder="Please input password" show-password/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">登录</el-button>
           <el-button>取消</el-button>
         </el-form-item>
     </el-form>
     </div>
   </template>
   
   <script>
     export default {
       // eslint-disable-next-line vue/multi-word-component-names
       name:'Login',
       data(){
         return {
           form:{
             username:'',
             password:''
           }
         }
       },
       methods:{
         onSubmit(){
           console.log('用户名：'+this.form.username)
         }
       }
     }
   </script>
   <style scoped>
   #login_container{
     width: 40%;
     margin: 0 auto;
   }
   #login_header{
     text-align: center;
     margin-top: 50px;
     margin-bottom: 30px;
     font-size: 25px;
     color: #42b983;
   }
   </style>

   运行后，显示

上述代码，看着都没问题啊？头大！反复网上查找前辈跑过的坑，终于发现问题。Vue2和Vue3代码引用上的不同。

Vue2 引用使用router中 mode

// 4.创建路由对象
const router = new createRouter({
    // 去掉路由 #
    mode:createWebHistory(),
    routes,
})

Vue3 引用使用router中

history:createWebHistory(),

// 4.创建路由对象
const router = new createRouter({
    // 去掉路由 #
    history:createWebHistory(),
    routes,
})

问题解决