No puedo encontrar un error en este código. Quiero usar un vue-router, pero cuando escribo el código del enrutador en main.js , no se muestra nada en el navegador, y cuando elimino el código del enrutador, aparece "Hola" en el navegador, es decir, el proyecto comienza laboral

principal.js

 import { createApp } from 'vue'; import App from './App.vue'; import {createRouter, createWebHistory} from 'vue-router'; import gridPage from '../views/grid-page.vue' const router = createRouter({ // history: createWebHistory, routes: [ {path: '/', name: 'Grid', component: gridPage}, ] }); createApp(App).use(router).mount('#app');//.createApp(App).use(router).mount('#app')

aplicación.vue

 <script> </script> <template> <p>Hello</p> <router-view></router-view> </template> <style> </style>

grid-page.vue

 <script> import grid from '../src/components/grid.vue' import sidebar from '../src/components/sidebar.vue' let idi = 0; export default { components: { grid, sidebar }, data() { return { } }, } </script> <template> <div class="root"> <sidebar /> <grid /> </div> </template> <style> .root{ display: flex; height: auto; } </style>