需要安装vue-router

npm install vue-router

安装完成后在package.json中就会有vue-router

 在src下新建一个文件夹router，新建一个index.js，如下：

import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
const routes=[
{path:"/",name:"Home",component:Home},
];
const router=createRouter({
    history:createWebHistory(),
    routes

})
export default router;

有多个路由的话就在routes中添加多个就可以了。

如果想要其他组件可以使用路由，那么就要在main.js中挂载使用，如下

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';
//默认
//createApp(App).mount('#app')
//挂载路由
createApp(App).use(router).mount('#app')

然后我们就可以在app.vue中使用这个路由，如下

<script setup>
 
</script>
 
<template>
 <router-view></router-view>
</template>
 
<style scoped>
 
</style>

<router-view></router-view>这个会去查找path为/的路由，看index.js中配置的这个路径就是Home组件。

接下来创建一个导航组件Navbar.vue

<script setup>

</script>

<template>
  <header>
    <h1>个人博客</h1>
    <nav>
      <!--<router-link :to="{name:'Home'}">首页</router-link>-->
      <!--下边这种方式也可以-->
      <router-link to="/">首页</router-link>
      <router-link to="/create">新建</router-link>


    </nav>
  </header>
</template>

<style scoped>
</style>

那么如何在首页引用这个导航组件呢，需要在App.vue中import这个导航组件，然后在template中加上这个组件即可，如下：

    <script setup>
    import Navbar from './components/Navbar.vue'
    </script>

    <template>
    <Navbar></Navbar>
    <router-view></router-view>
    </template>
    
    <style scoped>
    
    </style>