Home>
For

nuxt.js, transition is not possible between pages generated by nested routes.

I created a page with a nested root and an id in json. (The directory is as follows)

assets /
-| data.json
pages /
-| users /
----- | _id.vue
----- | index.vue
-| users.vue
-| index.vue
dist /
-| users /
----- | 1 /index.html
----- | 2 /index.html
----- | 3 /index.html
-| index.vue

When you jump to a page in another dist/users from a link (nuxt-link below) set on a page in dist/users, the link changes, but the screen remains the original page. I will. (Does it say "not drawn"?)

pages/users.vue

~
<ul>
  <li v-for = "user in userList": key = "user.id">
    <nuxt-link: to = "'/ user /' + user.id" v-text = "user.name"></nuxt-link>
  </li>
</ul>
~
<script>
import json from './../assets/data.json'
export default {
  data () {
    return {
      userList: json
    }
  }
}
</script>

Probably the official documentation
https://router.vuejs.org/en/guide/essentials/dynamic-matching.html
I think that this is because the same component instance is reused when the user transitions.

Can you tell me how I can display the destination page with nuxt-link?
I would appreciate it if you could give me the code if possible.

  • Answer # 1

    If you generate with

    nuxt generate, it should be a static page, so you should check the html generated in dist to see if the desired one is generated.

    However, this time the page is not displayed even when launching development mode, so this is probably the cause.
    https://en.nuxtjs.org/api/components-nuxt-child/

    In this case, I think that it will be solved by insertinginpages/users.vue.

    Please check.