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

HiJiangChuan · · 618 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

![Vue Router 手把手教你搭 Vue3 路由](https://kalacloud.com/static/b4fd4ef1cfbeb1cd4ca25ce388cd6e05/ef245/head.jpg) 本文首发:《[Vue Router 手把手教你搭 Vue3 路由 - 卡拉云](https://kalacloud.com/blog/vue-router-tutorial-for-vue-3/)》 Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。 本教程在 Vue3 中手把手教你搭建 Router ,并详细讲解其中的路由原理以及当用户输入错误时,如何路由到 404 页面等方法。请打开你的 Terminal 跟随本教程一起学习。 如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。 ## 从安装 Vue3 开始 我们先来安装 Vue3 ,一步一步来: ``` npm install -g @vue/cli ``` 然后我们将创建我们的基本 Vue 3 应用程序。 ``` vue create kalacloud-vue-router ``` ![vue3-setup](https://kalacloud.com/static/84187c9a7a1576d8455d6bdd98484f34/c83ae/01-vue3-setup.png) 选择 Vue 3 ,然后会自动帮你创建基于 Vue 3 的项目。 完成后,我们 `cd` 到项目目录,接下来我们本教程所有操作都在这个目录下完成。 ``` cd kalacloud-vue-router ``` 我们先运行一下看看效果: ``` npm run serve ``` 在浏览器输入 `http://localhost:8080` ,可以看到 Vue3已经运行起来了。 扩展阅读:《[最好用的 6 款 Vue 拖拽组件库推荐](https://kalacloud.com/blog/best-drag-drop/)》 ## 安装 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 入门指南 - 手把手教你开发任务看板](https://kalacloud.com/blog/vue-draggable-tutorial/)》 ## 在 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 时间日期选择器测评推荐](https://kalacloud.com/blog/best-vue-date-timepicker-components/)》 ## 在 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)搭建实战 - 低代码拖拽定制订单管理系统](https://kalacloud.com/blog/delivery-tracking-case-study/)》 ## 创建页面组件 接着,我们来创建「首页」和「关于」两个页面组件,这也是本教程中使用路由进行分配的两个组件。我们不把这两个组件放在 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 ``` ![router](https://kalacloud.com/09b5a01c710be54e05bb4a08d0e3a9db/02-router.gif) 在浏览器输入 `http://localhost:8080` 页面正常访问并且无刷新跳转页面。 扩展阅读:《[最好用的 7 个 Vue Tree select 树形组件](https://kalacloud.com/blog/best-vue-tree-view/)》 ## 创建 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 ``` ![404](https://kalacloud.com/static/fec7cf150202eb752f4d8b8ae4fed9d3/6951b/03-404.jpg) 在浏览器中随便输入一个 URL,类似 `http://localhost:8080/asdfasdfasdf` 浏览器指向我们刚刚写的 404 页面。 扩展阅读:《[Vue 搭建带预览的「上传图片」管理后台](https://kalacloud.com/blog/vue-upload-image-axios/)》 ## 总结 本文手把手带领大家搭建了一套简单的 Router 单页面路由。如果你学习前端仅仅是为了接上自己的数据库,快速搭一套根据自己工作流设计的后台管理系统的话,推荐使用卡拉云,卡拉云是一套低代码开发工具,完全不用懂前端,鼠标拖拽,简单直观。 ![kalacloud](https://kalacloud.com/static/7e0c9deb1b34f97b8d645310ae75b139/54af7/05-kalacloud.jpg) 上图为使用卡拉云搭建的销售 SaaS Demo,卡拉云内置标签容器,让你轻松在多个页面中切换。无需任何前端技术,直接拖拽组件即可实现。 卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。**原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费[试用卡拉云](https://kalacloud.com/)。** 扩展阅读: - [最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/) - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/) - [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/) - [PAW 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/paw-tutorial/)

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

618 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传