Vue-router 的基本使用

1、路由是个啥

路由（routing）就是通过互联网把信息从源地址传输到目的地址的活动。路由发生在 OSI 网络参考模型中的第三层，即网络层。我们日常生活中接触的路由有很多，比如路由器，它主要起到一个分发请求的功能。

路由引导分组转送，经过一些中间的节点后，到它们最后的目的地。作成硬件的话，则称为路由器。路由通常根据 路由表（一个存储到各个目的地的最佳路径的表）来引导分组转送。因此为了有效率的转送分组，创建存储在路由器存储器内的路由表是非常重要的。

1.1、后端路由阶段：

后端渲染：当用户输入一个网址向服务器发送请求后，服务器解析用户数据的 url，并找到用户想请求的页面的相关数据，在服务器端直接将页面渲染好，然后发给客户端，客户端直接展示网页。

后端路由： 上面这种渲染方式，后端会处理 url 和页面之间的映射关系，这个就叫做后端路由。

1.2、前后端分离阶段：

Ajax 出现后，有了前后端分离的开发模式，后端只提供 API 来返回数据，前端通过 Ajax 获取数据，并且可以通过JavaScript 将数据渲染到页面中。

这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上。

1.3、单页面富应用阶段：

单页面富应用：程序只有一个总的网页，用户一次请求直接把页面的 html+css+js 全部请求下来（非必须文件可以使用懒加载，缩短首屏渲染时间），然后根据不同的前端路由对应展示每一个模块。

单页面富应用最主要的特点就是在前后端分离的基础上加了一层前端路由。

2、路由的两种模式

VueRouter 有两种模式，hash 模式 和 history 模式，history 模式下的 url 路径没有 # 号。修改模式的方法是在 VueRouter 的实例下写上如下代码：mode：'history' 或 mode：'hash'。这两种模式的区别如下：

1、第一种模式：利用 url 的 hash，就是通常所说的锚点 #，JavaScript 通过 hashChange 事件 来监听 url 的变化。比如这个 URL：http://www.abc.com/#/hello，hash 值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。——SEO 不友好（服务器收不到 #...）

2、第二种模式：HTML5 的 History 模式，它使 url 看起来像普通网站那样，以“/”分割，没有#，单页面并没有跳转。不过使用这种模式需要服务端支持，服务端在接收到所有请求后，都指向同一个 html 文件，不然会出现 404。因此单页面应用只有一个 html，整个网站的内容都在这一个 html 里，通过 JavaScript 来处理。

history 模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

 hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

3、Vue-router的安装和配置

3.1、工程化的方式进行开发安装 Vue-router：

npm install vue-router --save

3.2、Vue-router 的配置：

>第一步：导入路由对象，并且调用Vue.use（VueRouter）

>第二步：创建路由实例，并且传入路由映射配置

>第三步：在Vue实例中挂载创建的路由实例

3.3、Vue-router 具体配置代码：项目的 src 文件夹下新建 router/index.js文件，在里面对路由进行相关的配置，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

//1.安装插件
Vue.use(VueRouter)    //底层是会执行VueRouter插件的install方法

//2.创建路由对象
const routes = [
    //这里面写路由和组件的具体映射关系
]
const router = new VueRouter({
    routes,
    mode:'history'    //history模式下，url中没有#
})

//导出router
export default router

3.4、配置完路由和映射关系之后需要到 main.js 文件对 vue-router 进行引入和挂载：

import Vue from 'vue'
import App from './App.vue'
import router from './router'    //这里会默认导入router/index.js

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router        //内部原理：Vue.prototype.$router = router
}).$mount('#app')

完成上述操作后，Vue-router就配置完成了，可以在 index.js 文件中配置路由和相关组件的映射关系

4、Vue-router 的基本使用

安装完毕后，就可以在项目中对 Vue-router 进行使用了，这是 Vue-router 的官方文档：传送门。下面是个官网例子：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！