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

要在 Vue3 中搭建路由系统，可以按照以下步骤进行：

安装 Vue3 并创建基本项目：
- 执行 Vue CLI 命令安装 Vue3 并自动创建项目。
- 进入项目目录并运行项目，通过浏览器访问项目地址查看效果。
安装 Vue Router：
- 使用 npm 或 yarn 命令安装 Vue Router。
配置 Router：
- 创建 Router 配置文件。
- 使用数组定义每个页面的路由。
- 设置 Router 为主体，并采用 history 模式。
在 main.js 文件中引入 Router：
- 在 main.js 文件中导入并配置 Router。
在 App.vue 文件中使用和集成 Router 功能：
- 修改 App.vue 文件，以适应路由切换的需求，通常使用 <routerview> 组件来显示匹配的路由正返组件。
创建页面组件：
- 创建两个页面组件，并将它们整合到 views 文件夹中。
验证页面切换：
- 运行项目，并通过浏览器访问不同的路由地址，验证页面切换是否正常。
引入 404 页面处理态羡机制：
- 创建 NotFound.vue 组件，并添加到 views 文件夹中。
- 配置 Router，使其在路由匹配失败时自动跳转至 404 页面。
- 测试输入非匹配 URL 的情况，确保正确跳转至 404 页面。

通过以上步骤，你可以搭建一套简单的单页面路由系统。此外，推荐使用卡拉云等低代码开发平台，以快速搭建企业帆清拍工具，减少开发时间。

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