vue3项目创建+router

### 如何在 Vue 3 项目中集成和配置 Vue Router #### 创建 Vue 3 项目并安装 Vue Router 要在一个新的 Vue 3 项目中集成 Vue Router，首先需要创建一个新的 Vue 3 项目。可以使用 `npm` 提供的官方脚手架工具完成此操作。 运行以下命令来创建一个新项目： ```bash npm create vue@latest ``` 按照提示选择所需的选项，并完成项目的初始化过程[^4]。一旦项目创建完毕，可以通过以下命令进入项目目录： ```bash cd your-project-name ``` 接着，在项目中安装最新版本的 Vue Router (v4)，这是专门为 Vue 3 设计的路由库。执行如下命令进行安装： ```bash npm install vue-router@4 ``` 这一步完成后，Vue Router 就已经成功安装到您的 Vue 3 项目中了[^2]。 --- #### 配置 Vue Router 为了使 Vue Router 正常工作，您需要对其进行基本配置。以下是详细的步骤说明： 1. **创建路由器实例** 在项目根目录下新建文件夹 `src/router` 并在其内部创建名为 `index.js` 的文件。该文件用于定义所有的路由规则以及初始化路由器实例。 下面是一个简单的示例代码片段展示如何设置基础路由结构： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; // 假设有一个主页组件 import AboutView from '../views/AboutView.vue'; // 假设有另一个关于页面组件 const routes = [ { path: '/', name: 'Home', component: HomeView, }, { path: '/about', name: 'About', component: AboutView, } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; ``` 上述代码实现了两个主要功能：一是导入必要的模块；二是声明了一组路径映射至特定视图组件的关系表（即所谓的“routes”数组），最后导出了已构建好的路由器对象以便其他部分调用[^3]。 2. **引入路由器到主程序** 接下来修改入口文件 `main.js` 或者 `main.ts` 来加载刚刚创建的路由器实例。具体做法是在其中加入对自定义路由器模块的引用，并将其传递给 Vue 应用实例作为参数之一。 修改后的 `main.js` 可能看起来像这样： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 这里通过 `use()` 方法把前面定义好的路由器挂载到了全局的应用上下文中去。 3. **编写对应的组件** 根据上面设定的两条路线 `/` 和 `/about` ，分别准备相应的组件文件 `HomeView.vue` 和 `AboutView.vue` 。这些就是当用户访问指定 URL 路径时所看到的内容区域。 示例中的每一个组件都应当遵循标准 Vue 单文件组件格式书写，比如下面这个例子展示了最简单形式下的 home 页面实现方式： ```html <!-- src/views/HomeView.vue --> <template> <div class="home"> <h1>欢迎来到首页</h1> </div> </template> <script> export default { name: 'HomeView' }; </script> ``` 同理也可以制作类似的 about 组件。 4. **更新模板以支持导航链接** 最后不要忘记调整顶层布局文件 `App.vue` ，使其包含 `<router-view>` 插槽以及其他可能需要用到的导航控件，例如按钮或者菜单项等。这里给出一段示范性的代码表示方法： ```html <!-- src/App.vue --> <template> <nav> <router-link to="/">首页</router-link> | <router-link to="/about">关于我们</router-link> </nav> <router-view /> </template> <style scoped> nav { padding: 30px; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style> ``` 使用 `<router-link>` 元素代替普通的超链标签 `<a href="">...</a>` 是因为前者会更加高效地处理前端历史记录变化而无需刷新整个网页内容。 至此为止，我们就完成了基于 Vue 3 构建带路由系统的单页应用(SPA)的所有必要准备工作！ --- ###