初入Vue3小白遇到Vue Router路由失效不起眼的小问题

对于一个初入Vue3的小白，根据官方文档整合Vue Router时遇到的一些小问题。

首先下载vue router（vue3使用vue-router@4版本）

npm install vue-router@4

然后创建路由实例

import { createMemoryHistory, createRouter } from 'vue-router'

import Index from '../page/HomePage.vue'
import Login from '../page/Login.vue'
import HomePage from "@/page/HomePage.vue";

const router = createRouter({
    history: createMemoryHistory(),
    routes: [
        { path: '/', component: Login },
        { path: '/home', component: HomePage }
    ]
})


export default router

注册路由

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";

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

最后就可以直接使用了，第一种使用方式，通过RouterLink 标签的形式做页面的跳转

<RouterLink to="/">Go to login</RouterLink>
<RouterLink to="/home">Go to homePage</RouterLink>

第二种通过useRouter来跳转页面

<script setup>
    const router = useRouter()
    router.push("/")    
</script>

在这里我遇到一个问题，路由不生效了，控制台和f12都没有任何报错

原因就是没有在App.vue文件下使用<router-view/>标签

<template>
  <router-view/>
</template>

<script setup>
</script>

<style scoped>
</style>

同时使用<router-view/>标签需要在创建路由实例的时候指定 / 根标签。这样路由就重新生效了