vue3-路由能跳转，页面却不跳转

遇到一个问题整了一天虽然也看出是啥问题，然后我换了种访问路由的方法
就是点击主页超链接还有用户模块超链接，路由改变了，但是主页的内容都不变。（忽略我的页面设计，纯属练手乱配色的）


router的路由配置index.js（这边是没问题的）

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import Student from '../components/Student.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/User',
    name: 'User',
    component: User
  },
  {
    path: '/Student',
    name: 'Student',
    component: Student
  }

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes

})

export default router

app.vue内容

<template>
  <div id="app">
     <h1 class="aa">欢迎：{{msg}}</h1>
      <a href="#/">主页 </a>
      <a href="#/user">用户模块 </a>
      <a href="#/student">学生模块 </a>
          <router-view/>

  </div>
</template>
<script>
...
</script>
<style>
....
</style>

解决方案：

把app.vue的路由访问方法改成

        <template>
  <div id="app">
     <h1 class="aa">欢迎：{{msg}}</h1>
          <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 `to` 来指定链接 -->
            <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
            <router-link to="/">主页 </router-link>
            <router-link to="/user">用户模块 </router-link>
            <router-link to="/student">学生模块 </router-link>
          </p>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>

  </div>
</template>
<script>
...
</script>
<style>
  ...
</style>

成功了！！！泪目