美文网首页
三、Router实例

三、Router实例

作者: zdxhxh | 来源:发表于2020-02-02 20:17 被阅读0次

Router实例化

对应以下 开发 代码

const router = new Router({
  routes
});

该对象的属性由源码所示,最重要的属性是history,该对象为开发者提供了很多方法。如 :

this.$router.go();
this.$router.push();

源码

export default class VueRouter {
  static install: () => void;
  static version: string;

  app: any;
  apps: Array<any>;
  ready: boolean;
  readyCbs: Array<Function>;
  options: RouterOptions;
  mode: string;
  history: HashHistory | HTML5History | AbstractHistory;
  matcher: Matcher;
  fallback: boolean;
  beforeHooks: Array<?NavigationGuard>;
  resolveHooks: Array<?NavigationGuard>;
  afterHooks: Array<?AfterNavigationHook>;

  constructor (options: RouterOptions = {}) {
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    // 生成比较函数
    this.matcher = createMatcher(options.routes || [], this)
    // 获取路由模式
    let mode = options.mode || 'hash'
    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract'
    }
    this.mode = mode
    // 生成history 对象
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }
}

相关文章

  • 三、Router实例

    Router实例化 对应以下 开发 代码 该对象的属性由源码所示,最重要的属性是history,该对象为开发者提供...

  • vue-router

    安装vue-router 引入 实例化router 将实例化的 router 添加到 vue 的实例中 在实例化r...

  • Vue Router Api参考(三)

    Router 实例属性 router.app 类型: Vue instance配置了 router 的 Vue 根...

  • vue2-vue-router

    用法 使用vue-router插件 router.js 创建Router实例 router.js 在跟组件上添加实...

  • vue-router跳转新窗口

    1. router-link标签 同a标签 2. router实例router.resolve 参考文档

  • this.$router与this.$route的区别

    this.$router是Vue-Router的实例,需要导航到不同路由则用this.$router.push方法...

  • $router 和 $route

    $router是Vue Router的实例,通常用来配置和执行路由行为https://router.vuejs.o...

  • lumen router

    laravel router router app.php中初始化的时候实例化router类给app::route...

  • vue-router

    一:router,routes,route1, router:一般指的就是路由实例.如router.push2, ...

  • 路由 vue-router

    this.$router和this.$route的区别是什么? this.$router:VueRouter的实例...

网友评论

      本文标题:三、Router实例

      本文链接:https://www.haomeiwen.com/subject/vczqxhtx.html