1. Hash模式(基于锚点,以及onhashchange事件)

实现原理:

  • URL中 # 后面的内容作为路径地址
  • 监听hashchange事件

  • 根据当前路由地址找到对应的组建重新渲染

    2. History模式(基于HTML5中的History API)

    1. 说明

  • history.pushState(), IE10以后才支持

  • history.replaceState()```javascript // node.js服务器配置history模式 const path = require(“path”); const history = require(“connect-history-api-fallback”); const express = require(“express”); const app = express() // node.js中配置history模式 app.use(history()) app.use(express.static(path.join(__dirname, “../vue-router/dist”))) app.listen(9000, () => { console.log(“server is take on, port: 9000”) })

// nginx配置history模式 nginx.config文件中: location / { // 末尾添加 try_files $uri/ /index.html }

  2. <a name="4Xcnb"></a>
  3. ### 2. 实现原理
  5. - 通过history.pushState()方法改变地址栏
  6. - 监听popstate事件
  7. - 根据当前路由地址找到对应的组建重新渲染
  8. <a name="G44Ul"></a>
  9. ### 3. 实现
  10. <a name="OsQEj"></a>
  11. #### 实现视图
  13. 1. install静态方法, 用于对当前插件安装的处理
  14. 1. 三个实例属性
  15.    - options, 保存routers配置
  16.    - routeMap, 保存路由的键值对
  17.    - data, 保存当前路由
  18. 3. createRouteMap实例方法, 遍历所有路由规则,以键值对的形式存储到routeMap中
  19. 3. initComponents实例方法, 定义router-link组件和router-view组件
  20. 3. initEvent实例方法, 用于监听popstate事件,当历史状态被激活的时候触发该事件,根据当前路由地址找到对应的组建重新渲染
  21. <a name="loqc4"></a>
  22. #### 实现代码
  23. ```javascript
  24. let _Vue = null
  25. export default class VueRouter {
  26.   // 注册vue-router插件的时候调用:Vue.use(VueRouter)
  27.   static install (Vue) {
  28.     // 1 判断当前插件是否已经安装
  29.     if (VueRouter.install.installed) {
  30.       return
  31.     }
  32.     VueRouter.install.installed = true
  33.     // 2 把Vue构造函数记录到全局变量
  34.     _Vue = Vue
  35.     // 3 把创建Vue实例时候传入的router对象注入到Vue实例上
  36.     _Vue.mixin({
  37.       beforeCreate () {
  38.         // Vue实例
  39.         if (this.$options.router) {
  40.           _Vue.prototype.$router = this.$options.router
  41.           this.$options.router.init()
  42.         }
  43.       }
  44.     })
  45.   }
  47.   constructor (options) {
  48.     this.options = options
  49.     this.routeMap = {}
  50.     this.data = _Vue.observable({
  51.       current: '/'
  52.     })
  53.   }
  55.   createRouteMap () {
  56.     // 遍历所有路由规则,把路由规则解析成键值对形式存储到routeMap中
  57.     this.options.routes.forEach(route => {
  58.       this.routeMap[route.path] = route.component
  59.     })
  60.   }
  62.   init () {
  63.     this.createRouteMap()
  64.     this.initComponents(_Vue)
  65.     this.initEvent()
  66.   }
  68.   initComponents (Vue) {
  69.     // router-link 组件
  70.     Vue.component('router-link', {
  71.       props: {
  72.         to: String
  73.       },
  74.       // template: "<a :href='to'><slot></slot></a>"
  75.       render (h) {
  76.         return h(
  77.           'a',
  78.           {
  79.             attrs: {
  80.               href: this.to
  81.             },
  82.             on: {
  83.               click: this.clickHandler
  84.             }
  85.           },
  86.           [this.$slots.default]
  87.         )
  88.       },
  89.       methods: {
  90.         clickHandler (e) {
  91.           // 通过history.pushState()改变地址栏
  92.           history.pushState({}, '', this.to)
  93.           // 根据当前路由地址找到对应的组建重新渲染
  94.           this.$router.data.current = this.to
  96.           // hash模式: 
  97.           // window.location.hash = this.to
  98.           // 阻止超链接对默认行为
  99.           e.preventDefault()
  100.         }
  101.       }
  102.     })
  103.     const self = this
  104.     // router-view 组件
  105.     Vue.component('router-view', {
  106.       render (h) {
  107.         const component = self.routeMap[self.data.current]
  108.         return h(component)
  109.       }
  110.     })
  111.   }
  113.   // 监听popstate事件
  114.   initEvent () {
  115.     window.addEventListener('popstate', () => {
  116.       this.data.current = window.location.pathname
  117.     })
  119.     // hash模式
  120.     // window.addEventListener('hashchange', (e) => {
  121.     //  this.data.current = e.newURL.split('#')[1]
  122.     // })
  123.   }
  124. };