diff --git a/examples/index.html b/examples/index.html index f2bdf7225..2e2233bd6 100644 --- a/examples/index.html +++ b/examples/index.html @@ -25,6 +25,7 @@

Vue Router Examples

  • Auth Flow
  • Discrete Components
  • Nested Routers
    • +
  • Navigation Guard Callback
    • diff --git a/examples/navigation-guard-callback/app.js b/examples/navigation-guard-callback/app.js new file mode 100644 index 000000000..40a6e7109 --- /dev/null +++ b/examples/navigation-guard-callback/app.js @@ -0,0 +1,74 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) + +const Foo = { + template: '
    foo
    ', + beforeRouteEnter (to, from, next) { + // in-component beforeRouteEnter hook + next(vm => { + // print log + app.logText = 'beforeRouteEnter callback emited' + }) + } +} + +const Bar = { template: '
    bar
    ' } + +const router = new VueRouter({ + mode: 'history', + base: __dirname, + routes: [ + // foo1 + { path: '/foo1', component: Foo }, + + // foo2, same component as foo1 + { path: '/foo2', component: Foo }, + + // bar + { path: '/bar', component: Bar } + ] +}) + +const app = new Vue({ + data: { + applyKeepAlive: false, + logText: '' + }, + router, + template: ` +
    +

    Navigation Guard Callback

    + +
    + + + +
    +
    + +
    +
    {{logText}}
    +
    + + +
    +
    + `, + methods: { + toggle () { + // wrap router-view with keep-alive + this.applyKeepAlive = true + }, + clear () { + // clear log + this.logText = '' + } + } +}).$mount('#app') diff --git a/examples/navigation-guard-callback/index.html b/examples/navigation-guard-callback/index.html new file mode 100644 index 000000000..11d0edd4b --- /dev/null +++ b/examples/navigation-guard-callback/index.html @@ -0,0 +1,10 @@ + + + +← Examples index +
    + + diff --git a/src/components/view.js b/src/components/view.js index f6183a0f4..25bdd0057 100644 --- a/src/components/view.js +++ b/src/components/view.js @@ -69,6 +69,17 @@ export default { matched.instances[name] = vnode.componentInstance } + // register instance in init hook + // in case kept-alive component be actived when routes changed + data.hook.init = (vnode) => { + if (vnode.data.keepAlive && + vnode.componentInstance && + vnode.componentInstance !== matched.instances[name] + ) { + matched.instances[name] = vnode.componentInstance + } + } + // resolve props let propsToPass = data.props = resolveProps(route, matched.props && matched.props[name]) if (propsToPass) { diff --git a/test/e2e/specs/navigation-guard-callback.js b/test/e2e/specs/navigation-guard-callback.js new file mode 100644 index 000000000..b6c3aa376 --- /dev/null +++ b/test/e2e/specs/navigation-guard-callback.js @@ -0,0 +1,48 @@ +module.exports = { + 'navigation guard callback': function (browser) { + browser + .url('http://localhost:8080/navigation-guard-callback/') + .waitForElementVisible('#app', 1000) + .assert.count('li a', 4) + + .click('.btn-clear-log') + .assert.containsText('.log', '') + .click('#foo1') + .assert.containsText('.current', 'foo') + .assert.containsText('.log', 'beforeRouteEnter callback emited') + + .click('#bar') + .assert.containsText('.current', 'bar') + + .click('.btn-clear-log') + .assert.containsText('.log', '') + .click('#foo2') + .assert.containsText('.current', 'foo') + .assert.containsText('.log', 'beforeRouteEnter callback emited') + + // back to root path + .click('#root') + .assert.urlEquals('http://localhost:8080/navigation-guard-callback/') + + // apply keep-alive + .click('.btn-apply-keep-alive') + .assert.elementPresent('.keep-alive-wrap') + + // do the same + .click('.btn-clear-log') + .assert.containsText('.log', '') + .click('#foo1') + .assert.containsText('.current', 'foo') + .assert.containsText('.log', 'beforeRouteEnter callback emited') + + .click('#bar') + .assert.containsText('.current', 'bar') + + .click('.btn-clear-log') + .assert.containsText('.log', '') + .click('#foo2') + .assert.containsText('.current', 'foo') + .assert.containsText('.log', 'beforeRouteEnter callback emited') + .end() + } +}