In the last article, we talked about how to use nuxT3’s convention routing to implement basic page routing. But for complex pages, basic routing is not enough. Let’s take a look at nuXT’s complex routing.

Embedded routines by

Nuxt3 redefines a semantic alias
to replace the
container that provides a child page for vue-Router nesting.

Create a parent folder and a. Vue file under Pages. Create child1.vue and child2.vue as child pages in parent folder.

  • The directory structure is as follows:
Pages / | - parent / | | -- child1. Vue | | -- child2. Vue | -- parent. VueCopy the code
  • Add two child pageschild1.vueandchild2.vue
<template>
  <h1>This is child component page 1</h1>
</template>

<template>
  <h1>This is child component page 2</h1>
</template>
Copy the code
  • To the parent pageparent.vueAdd a<NuxtChild/>Used to display child pages with two navigation links<NuxtLink/>Use to switch between two child pages
<template>
  <div>
    <NuxtLink to="/parent/child1">child1</NuxtLink> |
    <NuxtLink to="/parent/child2">child2</NuxtLink>
    <h1>Here is the parent component page</h1>
    <NuxtChild />
  </div>
</template>
Copy the code
  • inapp.vueAdd a navigation link toparent.vue
<template>
  <div>
    <NuxtLink to="/test">test</NuxtLink> |
    <NuxtLink to="/">The root</NuxtLink>
    <! -- -- -- > new
    <NuxtLink to="/parent">Nested routines by the page</NuxtLink>
    <NuxtPage></NuxtPage>
  </div>
</template>
Copy the code
  • Run as follows:

Dynamic routing

  • For dynamic routing, in NuxT3 you just write the dynamic parameters in[]Medium, and this[]Should write folder name or.vueFile name.
The file name Access path parameter
/parent-[user].vue / parent – xiao Ming {user: ‘xiao Ming’}
/parent-[user]/[id].vue / parent – xiao Ming / 1 {user: ‘xiao Ming, id: 1}
  • The parent folder name and the parent. Vue file name are changed to parent-[user]. The corresponding directory structure is as follows:
Pages / | - parent - [user] / | | - [id]. Vue | - parent - [user]. VueCopy the code
  • [id].vueParameters in the page (pass$router.params)
<template>
  <div>user: {{ $route.params.user }} id: {{ $route.params.id }}</div>
</template>
Copy the code
  • Access path/ parent - xiao Ming / 12You can visit[id].vuefile

conclusion

This concludes the discussion of dynamic routing and nesting. I believe you should know how to develop routing pages. In the next article we will explore how to build layout in NuxT3.