vue3vue-router

### Vue 3 结合 vue-router 使用指南

#### 安装依赖包
为了使 Vue 3 应用程序能够使用 `vue-router` 进行路由管理，需先安装必要的 npm 包。

npm install vue@next vue-router@4

#### 创建路由器实例
创建一个新的 JavaScript 文件来定义应用程序的路由逻辑。通常命名为 `router/index.js` 或者类似的名称：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue' // 假设有一个主页组件
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  }
]

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

export default router;

这段代码展示了如何设置基本路径以及关联视图组件到特定 URL 路径上[^1]。

#### 主应用入口配置
在项目的主文件（通常是 `main.js`），需要导入并使用刚刚创建好的路由器实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

这一步骤确保了整个应用程序都可以访问由 `vue-router` 提供的功能和服务。

#### 页面布局与导航链接
为了让页面之间可以相互跳转，在模板中可以通过 `<router-link>` 组件实现内部链接功能，并通过 `<router-view>` 来显示当前匹配的内容区域。

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>

  <!-- 动态加载对应于当前URL地址所指向的组件 -->
  <router-view></router-view>
</template>

此部分说明了怎样利用这些内置标签构建简单的单页应用(SPA)，从而让用户无需刷新浏览器即可浏览不同页面。