2

I am a Japanese not good at English sorry.

I have a nuxt project like this.

The mode is spa.

Directory construction

pages - index.vue
        index
          |_ child.vue
          |_ index.vue

pages/index.vue

<template>
  <div>
    {{ title }}
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
    title () {
      let title = ''
      if (this.$route.path === '/') {
        title = 'Parent'
      } else if (this.$route.path === '/child') {
        title = 'Child'
      }
      return title
    }
  }
}
</script>

When I build(or generate), you can get static file of child/index.html.

I upload inside the dist to server.

But if I access to http://deployedrootpath/child, the computed property doesn't work.

I think this happens because these static files are created before created hook.

It can only know returned value from asyncData hook.

So I did like this.

middleware/redirect.js

export default function ({ route, redirect }) {
  if (route.path === '/child/') {
    // I need to set some params because of navigation duplication error of vue-router.
    redirect('/child', { params: { 'redirect': true } })
  }
}

pages/index/child.vue

<template>
  <div>
    child
  </div>
</template>

<script>
export default {
 middleware: 'redirect'
}
</script>

Actually it worked but I know this is a terrible way.

And even if there is no way except for this, I want to at least hide params from redirected url.

Please help me.

  • try mounted hook in your page/index instead of computed – Ahmad Mobaraki Jan 27 at 5:26
  • Thank you. Actually the problem was because of difference between url's path and $route.path and I wanted to make them equal. So I used trailingSlash: true. – Akao Jan 27 at 5:30
1

I solved.

nuxt.config.js

trailingSlash: true

This make the static files path and $route.path same.

https://nuxtjs.org/api/configuration-router/#trailingslash

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.