vue3通过路由创建新的页面

在 Vue3 中，通过路由 (Router) 创建新的页面是一种常见的单页应用（SPA）导航方式。Vue Router 是一个官方推荐的用于 Vue.js 应用程序的路由器，它允许你在应用程序之间平滑地切换视图，而无需刷新整个页面。

以下是基本步骤：

1. **安装和引入**: 首先你需要安装 Vue Router，可以使用 npm 或者 yarn 安装：

   npm install @vue-router

2. **配置 router**: 在项目入口文件（如 main.js）中导入并初始化 Router：

   import { createRouter, createWebHistory } from 'vue-router';
   const routes = [...]; // 定义你的路由数组
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL), // 使用 HTML5 History API 或者 URL hash 存储路径
     routes,
   });

3. **定义路由**: 在 `routes` 数组中定义你要导航到的各个页面及其对应的组件。例如：

   const routes = [
     {
       path: '/home', 
       component: () => import('./views/Home.vue'), 
       name: 'Home',
     },
     {
       path: '/about', 
       component: () => import('./views/About.vue'), 
       name: 'About',
     }
   ];

4. **路由监听**: 在 Vue 组件中，你可以使用 `<router-view>` 标签动态渲染匹配到的路由组件：

   <template>
     <div id="app">
       <nav>
         <!-- 路由链接 -->
         <router-link to="/home">Home</router-link>
         <router-link to="/about">About</router-link>
       </nav>
       <router-view></router-view>  <!-- 当前显示的路由内容 -->
     </div>
   </template>

当你点击导航链接时，Vue Router 会自动根据 URL 更新 `<router-view>` 的内容，加载相应的组件，实现了无刷新页面间的跳转。