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.
mountedhook in yourpage/indexinstead of computed – Ahmad Mobaraki Jan 27 at 5:26trailingSlash: true. – Akao Jan 27 at 5:30