簡単VueRouterは達成します

ビュールーター

VueのルータはVueJS公式ルートマネージャです。アプリケーションは、単一のページを構築することは容易になるので、それVueJSとの統合の中核深さ、

ハッシュベース達成するためにルーティング・モード

kRouter.js

import Vue from 'vue'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

class VueRouter {
  constructor (options) {
    this.$options = options
    this.routeMap = {}
    // 引用Vue中数据的响应式  当路由发生改变重新去渲染页面
    this.app = new Vue({
      data: {
        current: '/'
      }
    })
  }

  init () {
    // 监听URL的变化
    this.bindEvents()
    // 解析路由配置
    this.createRouteMap(this.$options)
    //  实现两个组件
    this.initComponent()
  }

  bindEvents () {
    window.addEventListener('load', this.onHashChange.bind(this))
    window.addEventListener('hashchange', this.onHashChange.bind(this))
  }

  onHashChange () {
    // console.log(window.location.hash)  #/home
    this.app.current = window.location.hash.slice(1) || '/'
  }

  createRouteMap (options) {
    options.routes.forEach(item => {
    // {'/':Home,'/about':About}
      this.routeMap[item.path] = item.component
    })
  }

  initComponent () {
    // <router-link>home</router-link>
    Vue.component('router-link', {
      props: { to: String },
      render (h) {
      	// this.$slots.default 存储了当前元素的子节点
        return h('a', { attrs: { href: '#' + this.to } }, [
          this.$slots.default
        ])
      }
    })
    // router-view
    Vue.component('router-view', {
      render: h => {
        const comp = this.routeMap[this.app.current]
        return h(comp)
      }
    })
  }
}
// 入参是Vue构造函数
VueRouter.install = function (Vue) {
  // 混入
  Vue.mixin({
    beforeCreate () {
      // this.$options 表示new VUe({})实例中的配置项
      // this 是 当前的Vue实例
      if (this.$options.router) {
        // 仅在根组件中执行一次
        // 后面的组件中都可以使用this.$router
        Vue.prototype.$router = this.$options.router
        this.$options.router.init()
      }
    }
  })
}

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

図1は、作成VueRouter時のクラスは実装する必要がinstall使用するための方法VueRouterとして、VueJSプラグインの使用にあります。VueRouter使用プラグとして加えmixinそれぞれの混合効果VuebeforeCreateがフックときに初期化がルータに完成され、インスタンス化、および一度だけ初期化します。
図2に示すように、VueRouter3つのコアの方法が存在します

• URLモニターは変化し
  、対応するコンポーネントのレンダリングを見つけるために、変更にURLを聞くことによって、
• パースルーティングの設定
  オブジェクトコンポーネントにマップするURLを
• 二つの成分の建設
  アセンブリコンポーネント（ビュー・ルータ）ページジャンプをレンダリング（ビューリンク）
  。3、renderレンダリング機能

簡単に言えば、私たちは、ビルドJS言語のDOMに使用できるレンダリング機能を使用して、ページをセットアップするためにVueのHTML構文でテンプレートを使用します。Vueが仮想DOMあるので、テンプレートは、関数vノードに変換する際のテンプレートを取得し、翻訳プロセスを排除することで構築されたDOM、Vueのと機能をレンダリングするので

render: h => {	
        const comp = this.routeMap[this.app.current]
        return h(comp)
      }

ここでは、VNODEによってレンダリングルートマッチングコンポーネントは、機能をレンダリングします。

ベースのHTML5Historyモード

import Vue from 'vue'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

class VueRouter {
  constructor (options) {
    this.$options = options
    this.routeMap = {}
    // 引用Vue中数据的响应式  当路由发生改变重新去渲染页面
    this.app = new Vue({
      data: {
        current: '/'
      }
    })
  }

  init () {
    // 监听URL的变化
    this.bindEvents()
    // 解析路由配置
    this.createRouteMap(this.$options)
    //  实现两个组件
    this.initComponent()
  }

  bindEvents () {
    window.addEventListener('load', this.onHashChange.bind(this))
    window.addEventListener('hashchange', this.onHashChange.bind(this))
  }

  onHashChange () {
    this.app.current = window.location.pathname || '/'
  }

  createRouteMap (options) {
    options.routes.forEach(item => {
    // {'/':Home,'/about':About}
      this.routeMap[item.path] = item.component
    })
  }

  initComponent () {
    // <router-link>home</router-link>
    Vue.component('router-link', {
      props: { to: String },
      render (h) {
        return h('a', { attrs: { href: this.to } }, [
          this.$slots.default
        ])
      }
    })
    // router-view
    Vue.component('router-view', {
      render: h => {
        const comp = this.routeMap[this.app.current]
        return h(comp)
      }
    })
  }
}
// 入参是Vue构造函数
VueRouter.install = function (Vue) {
  // 混入
  Vue.mixin({
    beforeCreate () {
      // this.$options 表示new VUe({})实例中的配置项
      // this 是 当前的Vue实例
      if (this.$options.router) {
        // 仅在根组件中执行一次
        // 后面的组件中都可以使用this.$router
        Vue.prototype.$router = this.$options.router
        this.$options.router.init()
      }
    }
  })
}

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

レンダリング