前言
在前端领域里面,路由是非常重要的.所以我们不得不去了解路由到底是什么?
- 认识路由
- 下载插件
- 分析 router.js 文件
认识路由
从路由的实现原理来解释: 路由就是URL到函数的映射. 当你访问该URL的时候它就会执行对应的方法.
这里的
路由
并不是我们家里面用的路由器
,所以我们一定要区分路由
与路由器
的区别.路由器
我们可以认为它是一个容器
,用来管理多个路由
.
路由的模式
-
hash模式
早期前端路由的实现就是基于
localhost.hash
来实现. 它的实现原理也很比较简单.
localhost.hash
的值就是URL
中#
后面的内容.
hash模式URL: http://localhost:8080/#/
- history API
hash
模式虽然看上去也很不错,但是每一次使用都需要加上#
,看上去也太不美观了. 所以到了HTML5
又提供了history API
来实现.
history模式URL: http://localhost:8080/
第一步: 创建工程
vue create vue-router
第二步:下载router
vue add router
下载
router
的时候,vue-cli
脚手架会强制修改我们原来的文件.
App.vue
里面的内容会被强制性修改.
第三步: 解析router.js
下载好
router
之后,你会发现在src
路径下面多了一个router.js
文件.
- 导入Router
import Router from 'vue-router'
- 插件挂载
Vue.use(Router)
- 导出一个路由器实例.
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
],
mode: 'history'
})
routes
: 路由配置.
1.1path
: 路径.
1.2name
: 路由名称.
1.3component
: 组件.- mode: 路由模式
2.1history
: .
2.2hash
:
将来我们可以在routes里面去配置我们的路由.