【记账本实战】02 添加 Vue Router 路由管理器

添加 Vue Router 路由管理器

对初始化的项目进行瘦身

在使用 Vite 创建一个 Vue 项目 中，我们初始化好了一个 Vue 项目，我们需要对其进行瘦身，删除一些不会用到的文件。

删除 src/assets 目录的 vue.svg，文件，删除 src/components 目录下的 HelloWorld.vue 组件，删除 src/style.css 样式文件。

接着将 src/App.vue 中的代码修改为下面的内容：

<template>
  <div>
    App 页面
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped></style>

进行到这一步，我们的瘦身任务就算完成了。

Vue Router 介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

安装 Vue Router 路由

在终端中进入我们项目的根目录 daily-cost，接着使用下面的命令来安装路由插件：

npm install vue-router@next

等待安装完成之后，我们需要在 src 目录下新建 router 文件夹，添加 index.js 文件，该文件即为路由的配置文件。然后我们写入以下信息对其进行配置：

// 1. 从依赖包中导入路由函数 createRouter 和 createWebHashHistory
import { createRouter, createWebHashHistory } from "vue-router";

// 2. 从其他文件导入路由组件
import Home from "../views/Home.vue";

// 3. 定义一些路由
// 每个路由都需要映射到一个组件
const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
];

// 4. 使用 createRouter 方法创建一个路由实例 router
const router = createRouter({
  // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});

// 5. 导出路由对象
export default router;

上面的配置中的步骤解析如下：

1. 从依赖包中导入路由函数 createRouter 和 createWebHashHistory 。

   其中 createRouter 是用于创建路由实例的，而 createWebHashHistory 则是用于配置路由的 hash 模式，关于路由的 hash 和 history 模式的具体作用大家可以通过官方文档去了解。

2. 从其他文件导入路由组件。

   这里我们导入 Home.vue 组件，但是我们还没创建该路由组件（在接下来的步骤中会创建），在这里我们提前配置。

3. 定义一些路由。每个路由都需要映射到一个组件。

   由于一个应用中会包含有多个页面，所以路由与组件的映射配置一定是包含多组的，这也就是为什么这里初始化为一个数组的原因，里面的具体配置我们稍后讲解。

4. 使用 createRouter 方法创建一个路由实例 router。

   该方法需要传一个 JS 对象作为路由实例的配置选项，里面包含路由映射表（routes），路由模式（history）等。

5. 导出路由对象。

   由于该文件为路由的配置文件，并没有与 Vue 实例进行关联，所以想要在 Vue 实例中使用必须作为插件注册到 Vue 中，所以要先将该路由实例作为 ES Module 导出。

配置好路由信息之后，接下来我们要将路由实例导入到入口文件 main.js 中，并将之与 Vue 实例进行关联。

打开 src/main.js 做如下配置：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 1. 导入路由实例

const app = createApp(App); // 2. 创建 Vue 实例

app.use(router); // 3. 将导入的路由实例 router 注入到 Vue 实例 app 中

app.mount("#app"); // 4. 挂载 Vue 实例

上面的配置中的步骤解析如下：

1. 导入路由实例。

   这里的路径是省略了 index.js 的写法，如果路径只到文件夹，默认会去找该文件夹下的 index.js 去加载。

2. 创建 Vue 实例。

   由于后续需要注入路由实例，所以这里分开写了。

3. 将导入的路由实例 router 注入到 Vue 实例 app 中。

   vue-router 实际上是作为一个插件被使用的，所以 Vue 为插件提供一个 use 方法，方便注入。

4. 挂载 Vue 实例。

紧接着在 App.vue 文件下添加 router-view 组件，渲染路由匹配到的页面组件：

App.vue 的内容如下：

<template>
  <div>
    <!-- 设置路由页面显示区域 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped></style>

创建路由跳转页面

接着我们再新建一个组件 /src/views/Home.vue，以便让 / 路径能够渲染出内容：

<template>
  <div>首页</div>
</template>

<script>
export default {
  name: "HomeViews",
};
</script>

进行到这一步，我们就可以在终端运行 npm run dev 来启动项目了，然后在浏览器地址栏上输入 http://localhost:5173/，就可以访问项目了，如下图所示：

注意：上面截图中使用了 Chrome 开发者工具的设备模式，它可以模拟你的网站在移动设备上的显示效果。

到这里，我们就完成了 Vue Router 路由管理器的添加。