Vue Router 手把手教你搭 Vue3 路由 - 卡拉云

本文首发：《Vue Router 手把手教你搭 Vue3 路由 - 卡拉云》

Vue 的单页面应用是基于路由 + 组件的形式，路由用于设定访问路径，并将路径与组件映射起来。这种形式相对于 a 标签超链来说不会重新加载页面，而是在同一个页面中进行路由跳转。

本教程在 Vue3 中手把手教你搭建 Router ，并详细讲解其中的路由原理以及当用户输入错误时，如何路由到 404 页面等方法。请打开你的 Terminal 跟随本教程一起学习。

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

从安装 Vue3 开始

我们先来安装 Vue3 ，一步一步来：

npm install -g @vue/cli

然后我们将创建我们的基本 Vue 3 应用程序。

vue create kalacloud-vue-router

选择 Vue 3 ，然后会自动帮你创建基于 Vue 3 的项目。

完成后，我们 cd 到项目目录，接下来我们本教程所有操作都在这个目录下完成。

cd kalacloud-vue-router

我们先运行一下看看效果：

npm run serve

在浏览器输入 http://localhost:8080 ，可以看到 Vue3 已经运行起来了。

扩展阅读：《最好用的 6 款 Vue 拖拽组件库推荐》

安装 Vue Router 路由

我们先 Vue Router 安装到刚刚创建的 Vue3 项目中。

执行以下代码安装 Vue Router：

npm i vue-router@4

配置并建立 Vue Router 路由

接着我们配置 Router ，添加配置文件。在 /src 目录下新建 router 文件夹，然后新建 Router 配置文件 index.js

文件位置：/src/router/index.js

import { createWebHistory, createRouter } 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(),
  routes,
});

export default router;

在 Router 配置文件中，我们使用一个数组来写 Router 指向的每一个分页面。

• path 路由分配的 URL
• name 当路由指向此页面时显示的名字
• component 路由调用这个页面时加载的组件名

这段代码的最后是 Router 的主体。我们创建了一个路由，使用了 history 模式。

history 模式是 hash 模式的升级版，主要区别在浏览器链接的显示的不同

• hash 模式：把前端路由路径用 # 号拼接在真实 URL 后面的模式。当 # 后面的路径发生变化时，浏览器不会重新发起请求，而是出发 hashchange 事件。hash 模式链接样式：http://localhost:8080/#/home
• history 模式：history API 是 HTML5 的新特性，允许开发者直接更改前端路由。history 模式链接样式：http://localhost:8080/home

扩展阅读：《vue.draggable 入门指南 - 手把手教你开发任务看板》

在 main.js 引入 Router

接下来，我们要在 main.js 文件里引入我们刚刚设置的路由

文件位置：/src/main.js

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

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

（特别提示：请使用以上代码全部替换 main.js 内代码，避免与本教程代码不一致）

扩展阅读：《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐》

在 App.vue 中使用 <router-view> 和 <router-link>

App.vue 是项目的主组件，可以理解为项目的入口页面，所有页面都在 App.vue 页之下进行切换。接下来我们要来修改 App.vue ，以适应我们添加的 Router 功能。

文件位置：/src/App.vue

<template>
  <div id="nav">
      <router-link to="/"> 首页 </router-link> |
      <router-link to="/about"> 关于 </router-link>
  </div>
  <router-view />
</template>

（特别提示：请使用以上代码全部替换 App.vue 内代码，避免与本教程代码不一致）

• <router-view />： 这个 / 是承接自路由的容器，所有一级路由都在 / 之后。比如前文我们写的两个页面，/Home 和 /About
• <router-link>：在 history 模式下会拦截点击，不让浏览器重新加载页面。

扩展阅读：《订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统》

创建页面组件

接着，我们来创建「首页」和「关于」两个页面组件，这也是本教程中使用路由进行分配的两个组件。我们不把这两个组件放在 components 文件夹中，我们来增加一些难度，新建一个 views 文件夹，然后在这里创建 Home.vue 和 About.vue

文件位置：/src/views/Home.vue

<template>
  <h1>卡拉云是什么？</h1>
  <a>卡拉云 - 低代码开发工具。</a>
  <a>无需懂前端，仅需拖拽即可快速搭建属于你的后台管理工具，</a><a href="http://kalacloud.com" target="_blank">立即试用卡拉云</a>
</template>

文件位置：/src/views/About.vue

<template>
  <h1>关于卡拉云</h1>
<a>卡拉云 - 低代码开发工具。</a>
  <a>可接入常见的数据库及 API，快速搭建属于你的后台管理工具，一周工作量缩短至数小时，</a><a href="http://kalacloud.com" target="_blank">立即试用卡拉云</a>
</template>

好，现在我们把项目运行起来看看效果。

npm run serve

在浏览器输入 http://localhost:8080 页面正常访问并且无刷新跳转页面。

扩展阅读：《最好用的 7 个 Vue Tree select 树形组件》

创建 404 页面

404 页面比较特殊，它不是用户输入的 URL 所指页面，而是当用户输入的 URL 在路由里完全没有匹配的页面时，才会路由到 404 页面。

我们修改 Router 配置文件，当没有找到匹配的页面时，路由指向 404 页。

在 index.js 插入以下代码，文件位置：/src/router/index.js

{
  path: "/:catchAll(.*)",
  component: NotFound,
},

• (.*) 是一个正则表达式，如果用户输入的 URL 没有跟任何 Router 中的 path 匹配，那么就会与 (.*) 匹配，Router 就会把用户带到 404 页。

index.js 完整代码如下，请全部替换 index.js 内代码，避免与本教程代码不一致。

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
import NotFound from "@/views/NotFound.vue";

const routes = [
{
  path: "/:catchAll(.*)",
  component: NotFound,
},
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

建立好 404 的路由后，我们再来创建 404 错误页面，在 views 文件夹中创建 NotFound.vue

文件位置：/src/views/NotFound.vue

<template>
  <h1> 啊，404 了，没有找到你想要的页面。</h1>
</template>

好，接着我们运行项目，看看效果：

npm run serve

在浏览器中随便输入一个 URL，类似 http://localhost:8080/asdfasdfasdf 浏览器指向我们刚刚写的 404 页面。

扩展阅读：《Vue 搭建带预览的「上传图片」管理后台》

总结

本文手把手带领大家搭建了一套简单的 Router 单页面路由。如果你学习前端仅仅是为了接上自己的数据库，快速搭一套根据自己工作流设计的后台管理系统的话，推荐使用卡拉云，卡拉云是一套低代码开发工具，完全不用懂前端，鼠标拖拽，简单直观。

上图为使用卡拉云搭建的销售 SaaS Demo，卡拉云内置标签容器，让你轻松在多个页面中切换。无需任何前端技术，直接拖拽组件即可实现。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。

扩展阅读：

• 最好的 5 款翻译 API 接口对比测评
• 最好用的七大顶级 API 接口测试工具
• 最好用的 5 款 React 富文本编辑器
• Postman 使用教程 - 手把手教你 API 接口测试
• 最好的 6 个免费天气 API 接口对比测评
• PAW 使用教程 - 手把手教你 API 接口测试