Vue Js Button Link to Another Page

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Button link to another page</h3>
        <div>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/courses">Courses</router-link>
        </div>
        <router-view></router-view>
    </div>

const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

const app = Vue.createApp({})
        app.use(router)
        app.mount('#app')
    </script>

/* Style for the router links */
        #app div {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            margin-bottom: 20px;
        }

#app div a {
            color: #333;
            text-decoration: none;
            font-size: 18px;
            padding: 10px 20px;
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
        }

#app div a:hover {
            background-color: #333;
            color: #fff;
        }

/* Style for the router view */
        #app router-view {
            width: 100%;
            max-width: 600px;
        }
    </style>
</body>

</html>