vue全家桶-Router基础(1)

前言

在前端领域里面,路由是非常重要的.所以我们不得不去了解路由到底是什么?

• 认识路由
• 下载插件
• 分析 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文件.

1. 导入Router

	import Router from 'vue-router'

2. 插件挂载

 	Vue.use(Router)

3. 导出一个路由器实例.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ],
 mode: 'history'
})

1. routes: 路由配置.
   1.1 path: 路径.
   1.2 name: 路由名称.
   1.3 component: 组件.
2. mode: 路由模式
   2.1 history: .
   2.2 hash:

将来我们可以在routes里面去配置我们的路由.