Layout doesn't work when using router.push()

[edmundophie]

I have made a custom layout called HelloLayout.vue and a HelloWorld.vue page using it and works fine.
But, when I try to redirect to it from another page using this.$router.push('helloworld'), it gives error in the console as follow:

[Vue warn]: Failed to resolve async component:
function () { return resolve(name); }
Reason: Error: Cannot find module './default/default.vue'

Looks like it still try to use the default layout.

[ktsn]

Thanks for filing the issue.
Could you provide an example github repo reproducing this problem?

[edmundophie]

Here it is
https://github.com/edmundophie/reproduce-router

Try running http://localhost:8080/foo and inspect the console

I just noticed that this error only happen when I remove the default.vue layout. When I don't remove them, the issue seems to be fixed.

I don't understand why it needs default.vue layout to redirect to bar.vue page when bar.vue is not using that default layout at all.

[ktsn]

As default is always used when the component does not have layout or not resolved yet, you have to handle the case when createRouterLayout callback passes default value. If you want to change the default name, simply handle the value and replace it you like.

const RouterLayout = createRouterLayout(layout => {
  if (layout === 'default') {
    layout = 'defaultlayout'
  }
  return import(`@/layouts/${layout}/index.vue`)
})

[edmundophie]

Actually I already define the layout in bar.vue.

It seems like when I use this.$router.push('bar') it always try to use the default.vue layout instead.
But, if I directly access the localhost:8080/bar, it will correctly render the barlayout.vue

[ktsn]

Because the async component does not resolved in that case, then default is used.

[edmundophie]

<script>
export default {
  name: 'bar',
  layout: 'barlayout',
  components: {

  },
}
</script>

This is with direct url access:

This is with this.$router.push('bar'):

It uses default layout instead, even after i define the layout to use barlayout.

[ktsn]

Again, even though the component has layout, when it's not resolved yet, default is picked. Because all page components are declared as async components. We have no way to detect layout option in the component that is not downloaded yet.

FYI:

• https://vuejs.org/v2/guide/components-dynamic-async.html
• https://github.com/ktsn/vue-cli-plugin-auto-routing#pages

[ktsn]

Ah, I see your second point. It seems another issue. I'll look into it.

[edmundophie]

Ok got it.
But somehow this issue is look similar to what nuxt.js had and they seem to fix it already.

[ktsn]

@edmundophie I just fixed this on vue-router-layout side. Please try to install the latest vue-router-layout (v0.1.3).

[edmundophie]

Wow @ktsn I can't tell you how much I'm grateful for this fix.
If this is not fixed, I was thinking to use nuxt.js just to take advantage of its auto routing mechanism, which is like an overkill.

One last thing though, how do I authorize the router? Does it work well with vue-router navigation guard feature?

[ktsn]

Yes, both layouts and pages should be able to use vue-router's navigation guard since they are implemented on top of it. 🙂

Edit: layouts cannot use router navigation guard actually because they are not in routes.