在使用router进行vue3的导航开发时，启动项目后页面无显示？

在使用router进行vue3的导航开发时，启动项目后页面无显示，想问一下可能是哪里出现了问题？

main.ts代码

import { createApp } from 'vue'
import './style.css'
// @ts-ignore
import App from './App.vue'
// @ts-ignore
import router from './router/index.js'

// @ts-ignore
//import {createPinia} from 'pinia'


const app = createApp(App)
app.use(router)
//app.use(createPinia())
app.mount('#app')

App.vue代码

<script setup lang="ts">
   import {RouterView} from "vue-router"
</script>

<template>
  <RouterView/>
</template>

<style scoped>

</style>

router中的index.js代码

import Vue from "vue";
import {createRouter,createWebHashHistory} from "vue-router";
import AppLayout from "../components/layout/AppLayout.vue";


const router =createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            path:"/",
            name:"home",
            component:AppLayout,
        }
    ]
})

//导出路由
export default router;

页面没有默认显示，搜一下vue3路由设置默认显示就行了

//这是什么写法 ..................

const router = createRouter()[
    {
        path: '/',
        name: 'home',
        component: AppLayout,
    }
]

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这篇文章：【VUE学习笔记】vue-router编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出 NavigationDuplicated 的警告错误?
• 除此之外, 这篇博客: vue3-如何解决vue3项目打包发布到服务器后访问页面显示空白问题中的 2、处理router文件夹中的index.js文件，处理如下：采用修改后的部分 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
  import routes from "./routes";
  
  const router = createRouter({
  	// history: createWebHistory(process.env.BASE_URL), // 默认时
  	history: createWebHashHistory(process.env.BASE_URL), // 修改后
  	routes
  })
  export default router;
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^