我是一个新手，当谈到vue。所以我遵循了这个教程https://www.youtube.com/watch?v=WLQDpY7lOLg&ab_channel=TheCodeholic。其中我在“添加视图路由器”部分。
我做了他做的所有更改和添加（从创建视图文件夹和组件，创建路由器文件夹及其内部的index.js，甚至导入），但当我尝试npm运行dev时，我的网站上什么都没有。
下面是我在路由器文件夹中的代码：

import {createRouter , createWebHistory} from 'vue-router'
import Dashboard from "../views/Dashboard.vue"
import Login from "../views/Login.vue"
import Register from "../views/Register.vue"

const routes = [
    {
        path: '/',
        name: 'Dashboard',
        component: Dashboard
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
  });

export default router;

我的视图/Dashboard.vue中的代码

<template>

<h1> Dashboard </h1>

</template>

<script>
    export default {
        name: 'Dashboard'
    }
</script>

<style scoped>

</style>

以及从我的main.js

import { createApp } from 'vue'
import './style.css'
import store from './store'
import router from './router'
import './index.css'
import App from './App.vue'

createApp(App).mount('#app')
createApp(App).use(store)
createApp(App).use(router)

这是我运行npm run dev enter image description here时的照片
我看了好几遍都看不出哪里不对，请帮忙：〈
这是我所期望的
enter image description here