实现思路
· 创建 VueRouter 插件，静态方法 install
判断插件是否已经被加载
当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上 (注意：只执行一次)
· 创建 VueRouter 类
初始化，options、routeMap、app (简化操作，创建 Vue 实例作为响应式数据记录当前路径)
initRouteMap() 遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
创建 router-link 和 router-view 组件
当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view
Vue-Router 原理
动态路由
通过路由懒加载实现路由的增量加载
路由传参推荐使用 props 类似于父子组件传值的方式，不依赖由有规则
嵌套路由
二级路由/子路由
编程式导航
多用于点击按钮跳转页面
push方法
//两种方式
this. r o u t e r . p u s h ( ′ / ′ ) 字 符 串 方 法 , 直 接 通 过 地 址 跳 转 t h i s . router.push('/') 字符串方法,直接通过地址跳转 this. router.push(′/′)字符串方法,直接通过地址跳转this.router.push({name:‘Home’}) 对象方式，传递设置路由时的路有名称 name
this. r o u t e r . p u s h ( n a m e : ′ H o m e ′ , p a r a m s : i d : 1 ) 路 由 传 参 方 式 r e p l a c e 方 法 t h i s . router.push({name:'Home',params:{id:1}}) 路由传参方式 replace方法 this. router.push(name:′Home′,params:id:1)路由传参方式replace方法this.router.replace(’/’) 类似于push方法，但是不会记录本次历史，没法回退
go方法
this.$router.go(-2) 回退方法 -1回退一步 -2回退两步 只有push可以回退
Hash模式与History模式区别
表现形式区别
Hash模式 例：https://***/#/didi?id=值
History模式 例：https://***/did/值
原理区别
Hash模式
基于锚点，锚点值为路由地址 #后为路由地址 可以通过?携带参数 只改变#后路由地址不会向服务器发送请求,只记录进历史中
监听hashchange事件
根据当前路由地址找到对应组件重新渲染
History模式
基于HTML5中的History API 可实现客户端路由
通过 history.pushState() / history.replaceState() 改变地址栏不会向服务器发送请求 记录进历史中
history.pushState() IE 10以后支持
push与pushState区别
调用 push() 路径地址发生变化 向服务器发送请求,记录进历史
调用 pushState() 路径地址发生变化 不向服务器发送请求,记录进历史
history.replaceState()
监听popstate事件
根据当前路由地址找到对应组件重新渲染
Hash模式
History模式
Vue-Router默认的路由模式为Hash模式
History需要服务器支持
const router = new VueRouter({
mode:‘history’,
routers
})
Node中History模式 (单页应用)
node中处理history模式
刷新界面 => 服务端接收请求地址 => 服务器返回无此路由界面，返回默认html => 浏览器接收，解析路由地址 => 加载客户端对应的组件路由
//处理history模式的模块
const hisrtory = require(‘connext-history-spi-fallback’)
//基于Node的web框架express
const express = require(‘express’)
const app = erpress()
//注册hisrtory模块中间件
app.use(hisrtory())
// 其余操作
node中未处理history模式 无服务端支持
刷新界面 => 服务端接收请求地址 => 服务器无请求的网页 => 界面显示服务端自带的404界面
Nginx中History模式 (单页应用)
Nginx中处理history模式
刷新界面 => 服务端接收请求地址 => 服务器返回无此路由界面，返回try_files中设置的王站根路径下 index.html => 浏览器接收，解析路由地址 => 加载客户端对应的组件路由
nginx.conf文件的 server location中 配置Nginx中处理history模式
location /{
//新增
try_files $uri $uri/ /index.html;
}
重启Nginx
Nginx中未处理history模式 无服务端支持
刷新界面 => 服务端接收请求地址 => 服务器无请求的网页 => 界面显示服务端自带的404界面
Vue-Router模拟（History模式）
VueRouter类图
VueRouter模拟（History模式）
涉及vue基础概念
插件 component
混入 mixin
Vue.observable() 类似于轻量级的VueX
插槽 slot
render函数 render渲染调用h函数实现虚拟DOM
运行时和完整版的Vue
运行版本：不支持template模板，需要打包的时候提前编译 vue-cli创建的为运行版本
完整版：包含运行时和编译器，体积比运行时版大10K左右，程序运行时将模板转换为render函数
vue-cli创建项目支持插件中template(模板)写法
· 开启完成版本
· 项目根目录创建vue.config.js
· module.export = { runtimeCompiler:true} 开启完整版
· 使用render函数
vue插件挂载 vue.use(插件) //注册插件 插件是函数直接调用 插件是对象调用对象的install方法