Nuxt3 Introduction – Page Routing (2)

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 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.