• install
npm install vue-router@4

  • App.vue
<script setup></script><template>  <div>    <h1>Hello App!</h1>      <!--应用 router-link 组件进行导航 -->      <!--通过传递 `to` 来指定链接 -->      <!--`<router-link>` 将出现一个带有正确 `href` 属性的 `<a>` 标签-->      <router-link to="/">Go to Home</router-link>      <p>---</p>      <router-link to="/about">Go to About</router-link>    <!-- 路由进口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view>  </div></template>
  • router/index.js
// 1. 定义路由组件.// 也能够从其余文件导入import Home from "../views/Home.vue";import About from "../views/About.vue";import {createRouter, createWebHashHistory} from "vue-router";// 2. 定义一些路由// 每个路由都须要映射到一个组件。// 咱们前面再探讨嵌套路由。const routes = [    { path: '/', component: Home },    { path: '/about', component: About },]// 3. 创立路由实例并传递 `routes` 配置// 你能够在这里输出更多的配置，但咱们在这里// 临时放弃简略const router = createRouter({    // 4. 外部提供了 history 模式的实现。为了简略起见，咱们在这里应用 hash 模式。    history: createWebHashHistory(),    routes, // `routes: routes` 的缩写})export default router
  • views/About.vue
<template></template><script>export default {  name: "About"}</script><style scoped></style>
  • views/Home.vue
<template></template><script>export default {  name: "Home"}</script><style scoped></style>
  • main.js
import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from "./router/index.js";const app=createApp(App)app.use(router)app.mount('#app')