一、路由简介
路由,其实就是指向的意思,vue的单页面应用是基于路由和组件的。
二、路由的种类
静态路由(本人自认为)、动态路由、嵌套路由等
三、路由的使用
- 在src的components内创建.vue文件,实现需要后续配置路由的页面的基本配置,并在主页面即helloworld.vue定义<router-link><router-view>来实现点击部分和显示部分。
- 在src目录下,创建router.js文件,实现对自定义路由的管理。
- 将路由注入main.js根实例中,即可跑出挂在app.vue里的组件了。
摘记重点:
路由中有三个基本的概念 route, routes, router。
- route,它是一条路由,由这个英文单词也可以看出来,它是单数,例如: Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
- routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。例如:[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
- router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
- 客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
参考博客链接:https://www.cnblogs.com/SamWeb/p/6610733.html
路由官方介绍链接:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html