Vue2 Router 路由不正确，显示空白页面

Question

我是Vue新手，遇到路由问题 当我尝试启动我的前端 vue 时，它显示空白页面，我不知道为什么它没有路由到我的登录页面，任何人都可以帮助修复它吗？看起来路由器不能正常工作 在路由器文件夹 index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/page/login'

Vue.use(Router)

let routes = [
    {
        path: '/',
        redirect: '/login',
    },
    //front page
    {
        path: '/login',
        name: 'Login',
        component: Login,
    },
    //register
]

const createRouter = () => new Router({
    mode: 'history',
    routes: routes
})

const router = createRouter()

export default router

在 App.vue 中

<template>
  <div id="app">
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

在 main.js 中

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import router from './router/'
import store from './store';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

Vue.config.productionTip = false

Vue.use(ElementUI, {size: 'small'});

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

登录.vue

<template>
    <div>
        <h1>helloworld</h1>
        
    </div>
</template>

<script>

export default {
    name: "Login",
    data(){
        return{
            user:{},
        }
    },
    mounted(){

    },
    components:{
        
    },
    methods:{
        login(){
            
        }    
    },
}
</script>

<style scoped>

</style>>

已经尝试从在线网站搜索答案，但仍然无法解决这个问题，我不知道 在 package.json 文件中

    {
      "name": "frontend",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "axios": "^1.3.4",
        "core-js": "^3.8.3",
        "echarts": "^5.4.1",
        "element-ui": "^2.15.13",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0",
        "vuex": "^3.6.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "^4.5.0",
        "@vue/cli-plugin-eslint": "^4.5.0",
        "@vue/cli-plugin-router": "^4.5.0",
        "@vue/cli-service": "^4.5.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {
          "no-unused-vars": "off"
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }