mario-mui / blog Goto Github PK

import {reverse} from 'lodash'

treeToArray(tree) {
    const stack = reverse(tree);
    const array = [];
    while (stack.length !== 0) {
      const node = stack.pop();
      node.level = node.level || 0;
      if (node.children?.length) {
        reverse(node.children).forEach(i => {
          stack.push({ ...i, level: node.level + 1 });
        });
      }
      array.push(node);
    }
    return array;
  }

<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>
  <script>
    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
    }).$mount('#app')

  </script>
</div>

  //比如设置mode 为 'history' 默认情况为hash(本文所说的模式), 设置 routes熟悉
  options: RouterOptions;
 //vue-router 实现的三种模式
  mode: string;
  history: HashHistory | HTML5History | AbstractHistory;
  // 匹配路由的matcher
  matcher: Matcher;
  fallback: boolean;
  // 各种钩子方法
  beforeHooks: Array<?NavigationGuard>;
  resolveHooks: Array<?NavigationGuard>;
  afterHooks: Array<?AfterNavigationHook>;

const handler = e => {
      if (guardEvent(e)) {
        if (this.replace) {
          router.replace(location)
        } else {
          router.push(location)
        }
      }
    }

    const on = { click: guardEvent }
    if (Array.isArray(this.event)) {
      this.event.forEach(e => { on[e] = handler })
    } else {
      on[this.event] = handler // this.event 默认为click
    }

 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    this.history.push(location, onComplete, onAbort)
  }

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      pushHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const route = this.router.match(location, this.current)
    this.confirmTransition(route, () => {
      this.updateRoute(route)
      onComplete && onComplete(route)
      this.ensureURL()

      // fire ready cbs once
      if (!this.ready) {
        this.ready = true
        this.readyCbs.forEach(cb => { cb(route) })
      }
    }, err => {
      if (onAbort) {
        onAbort(err)
      }
      if (err && !this.ready) {
        this.ready = true
        this.readyErrorCbs.forEach(cb => { cb(err) })
      }
    })
  }

  updateRoute (route: Route) {
    const prev = this.current
    this.current = route
    this.cb && this.cb(route)
    this.router.afterHooks.forEach(hook => {
      hook && hook(route, prev)
    })
  }

history.listen(route => {
      this.apps.forEach((app) => {
        app._route = route
      })
    })