Skip to content

Adding 'ref' attribute to component in router-view breaks beforeRouteEnter next( vm => {} ) #461

@AgileInteractive

Description

@AgileInteractive

Version

4.0.0-beta.9

Reproduction link

https://jsfiddle.net/1e9mqocg/1/

Steps to reproduce

Add router-view with transition

<router-view v-slot="{ Component }">
  <transition v-on:enter="enterTransition">
    <component :is="Component" ref="myRouteComponent"/>
  </transition>
</router-view>

Add beforeRouteEnter guard to child view

beforeRouteEnter(to, from, next) {
    console.log('* beforeRouteEnter');
    next((vm) => { vm.setData(); } );
},

methods: {
    setData() {
        console.log('*** "Set data" from beforeRouteEnter here');
    }
}

What is expected?

setData() to be called when clicking "Home" (inspect console.log)

What is actually happening?

setData is never called


Just deleting the 'ref' attribute makes it work again, but the ref attribute is very useful.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingexternalThis depends on an external dependency but is kept opened to track it

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions