### 如何在
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 &#
39;
vue-router&#
39;;
import HomeView from &#
39;
../views/HomeView
.vue&#
39;; // 假设有一个主页组件
import AboutView from &#
39;
../views/AboutView
.vue&#
39;; // 假设有另一个关于页面组件
const routes = [
{
path: &#
39;/&#
39;,
name: &#
39;Home&#
39;,
component: HomeView,
},
{
path: &#
39;/about&#
39;,
name: &#
39;About&#
39;,
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 &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
import router from &#
39;
./router&#
39;;
const app = createApp(App);
app
.use(router);
app
.mount(&#
39;#app&#
39;);
```
这里通过 `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: &#
39;HomeView&#
39;
};
</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: #2c
3e50;
}
nav a
.router-link-exact-active {
color: #42b98
3;
}
</style>
```
使用 `<router-link>` 元素代替普通的超链标签 `<a href="">
...</a>` 是因为前者会更加高效地处理
前端历史
记录变化而无需刷新整个网页内容。
至此为止，我们就完成了基于
Vue 3 构建带路由系统的单页应用(SPA)的所有必要准备工作！
---
###
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
787
