Vue 之 路由

本文主要讲一下 Vue Router 的实现原理、路由的作用以及在项目中如何应用。

一、什么是路由

Vue Router 是 Vue 官方的路由管理器，它和 Vue 的核心深度集成，用于构建 SPA（单页面应用），是 SPA 的路径管理器。再通俗一点，vue-router 是 webApp 链接路径管理系统。

二、路由的作用

Vue 的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

传统的页面应用，使用一些超级链接实现页面切换和跳转。在 vue-router单页应用中，则是路径之间的切换也是组件之间的切换。路由模块的本质是 建立起 url 与页面之间的映射关系。

三、实现原理

单页应用中，在加载一个页面时，不会加载整个页面，只会更新某个指定容器中的内容，即更新视图而不去重新请求页面。vue-router 在实现单页面应用中提供了两种方式： Hash 模式和 History 模式。

1、Hash 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。类似于：

1	http://www.xxx.com/#/login

这种后面的 Hash 变化并不会导致浏览器向服务器发送请求，浏览器不发出请求，页面就不会刷新。并且，每次 hash 值的变化都会触发 hashchange 事件，通过这个事件我们可以知道 hash 值发生了哪些变化。所以我们可以监听 hashchange 事件，从而实现视图的切换：

window.addEventListener('hashchange',()=>{
  // hash 变化了，执行的操作
  console.log('hash change');
})

2、History 模式

使用 History 模式时，页面 url 会像正常的 url 一样能够访问。由于 HTML5 新增的 API pushState 、 replaceState ，通过这两个 API 可以改变 URL 并且不会发送请求。同时 popstate 事件能够监听路由变化。实现方式与 hashchange 类似。

与 Hash 模式不同的是， History 在刷新页面或直接访问某个路由的时候，如果服务端没有配置此页面那么将会返回 404 。

3、跳转方式

链接跳转 <router-link to="/"></router-link>
JS 跳转： this.$router.push('/login')
直接修改路径

四、Vue 如何实现路由

1、安装

CDN 引入： <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
npm 安装： npm install vue-router

如果在模块化工程中引入，那么需要通过 Vue.use() 明确地安装路由功能。

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

Vue.use(VueRouter)

2、使用

1) 页面跳转：

HTML:

<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="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

JS:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes 
})

const app = new Vue({
  router,
  el:"#app"
})

以上，是最简单的实现路由跳转的功能