Nested Router

[znck]

What problem does this feature solve?

Create embedded app demo e.g.: https://reacttraining.com/react-router/web/example/basic

What does the proposed API look like?

• Named export for history implementations (AbstractHistory mainly)
• Don't use $router and $route reference on root vue instance

  // In install mixin
  beforeCreate: function beforeCreate () {
      if (isDef(this.$options.router)) {
        this._router = this.$options.router;
        this._router.init(this);
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      } else {
        this._router = this.$parent.$router
        this._route = this.$parent.$route
      }
      registerInstance(this, this);
    }
   // Prototype getters
  Object.defineProperty(Vue.prototype, '$router', {
    get: function get () { return this._router || this.$root._router }
  });
  
  Object.defineProperty(Vue.prototype, '$route', {
    get: function get () { return this._route || this.$root._route }
  });

• Modify matched route depth logic (stop at first ancestor with router) in <router-view>

[posva]

I wonder if using inject/provide wouldn't make things much easier

[znck]

@posva Could you provide an example for your approach?

[posva]

The idea is that whenever you provide the router option on an instance, that instance is providing its $router and $route, and that all instances are injecting $router and $route, and therefore, accessing the closest router instance

[yyx990803]

@znck can you try it out using a dev build and see if it works for the demo?

[yyx990803]

Ugh nvm it introduced some failing tests :/