Nuxt.js: beforeRouteEnter with redirect to sub-route causes nuxt-child to error

[MartinMuzatko]

Version

v2.8.0

Reproduction link

https://codesandbox.io/embed/codesandboxnuxt-z4ovb

Steps to reproduce

Open a page containing a nuxt-child with a beforeEnter route guard redirecting to a sub-page

What is expected ?

When programmatically navigating there (e.g. by clicking a link) there is no error. If opening the page on first view, an error is thrown.

What is actually happening?

Error aborting the view.

_{This bug report is available on Nuxt community (#c9303)}

[pimlie]

This exact error should be fixed in v2.8.1, but there might be another issue still. Eg with the nested-routes example I get a bailing hydration error. Can you please check if that happens for you too with 2.8.1?

[MartinMuzatko]

Installing latest nuxt now, will let you know today :)

[MartinMuzatko]

I think this problem is solved, but when I re-route to the parent page, then routeBeforeEnter is not triggered..

I get no more error but I still don't get redirected properly.
When navigating to the parent page while the subpage is open, the beforeRouteEnter hook does not get triggered. Not sure if this is a nuxt or vue-router bug :S

And I have another bug, where when directly navigating to the parent page, the child route gets loaded but then discards the state. But I save that for another issue.
Another issue gets visible on page load: As you can see, the child page is loaded BEFORE the URL gets updated. Is beforeRouteEnter neglected from serverside? I'd expect that if I have a redirect using beforeRouteEnter, that the serverside already sends me the new page

Thanks in advance :)

[pimlie]

Not a bug I think, it probably re-uses the same parent component so you also need to call beforeRouteUpdate

[MartinMuzatko]

Also I have another problem: If I load /assets (the parent route) directly, I get a client-side hydration error:

Even though the <nuxt /> and <nuxt-child /> element contains a div for testing. if I load /assets/devices directly, I don't get this hydration problem :(

[pimlie]

I looked into this earlier and I think this is what happens:

On the server:

• load url /assets
• redirect to /assets/devices in beforeRouteEnter
• render /assets/devices page
• return (ssr) data for /assets/devices page

Then next on the client the following:

• nuxt app created for url /assets
• loads /assets page component
• applies ssrData
• nuxt app is mounted
• redirect to /assets/devices in beforeRouteEnter
• load /assets/device component
• renders _without_ applying any ssrData

Not sure if this is fixable, you could try to use redirect in asyncData of /assets instead. But if /assets needs to return asyncData as well you are probably out of luck.

[MartinMuzatko]

I don't need asyncData in /assets _yet_. I think I will solve it like that. 👍

However! my setup page decides depending on a fetch method, whether to show a tab or not.

    computed: {
        ...serverconfig.mapState(['serverconfig', 'error'])
    },
    async fetch({ store }) {
        store.dispatch('serverconfig/getServerconfig')
    },
    created() {
        if (this.serverconfig.SystemType == 'onBox') {
            this.pages.splice(2, 0, {
                name: 'Network',
                icon: 'device_hub',
                path: '/setup/network'
            })
        }
    },
    beforeRouteEnter(to, from, next) {
        if (to.name == 'setup') return next('/setup/system')
        next()
    }

[MartinMuzatko]

works perfectly! Thank you for your help :)
Then I would advise in the docs to only use asyncData redirects. 👍

[MartinMuzatko]

The only problem I have now, is that when clicking on the parent page route again, the asyncData method is not used to redirect - maybe I have to use in combination with the route guard then, I will further try and report.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[MartinMuzatko]

Just as a reminder, I still have this problem :/
Using in combination with the route guard does not work
Thanks for putting the pending label.
I will put up a sandbox

[Atinux]

Hi @MartinMuzatko

I recommend you to use the middleware instead for beforeRouteEnter, so Nuxt can call it when needed and correctly :)

See your demo updated to use the middleware: https://codesandbox.io/s/codesandbox-nuxt-p4knd

[MartinMuzatko]

This is brilliant! thank you so much @Atinux