“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

Yesterday we learned how to create a project and the basics of routing. Today we continue with yesterday’s routing and explore Nuxt3 routing in more depth.

Nuxt will automatically integrate vue-Router and mapping pages/ directories into the application’s routing.

Nuxt automatically matches the pages directory of the project to generate vue-Router routing configuration information and then integrates it into the project. This makes the route construction of the project more convenient, and does not have to worry about configuration like router.js, very flexible and convenient. The pages/ file is optional. For applications that have no landing pages or routing, vue-Router dependencies will not be included in the project. This is also very friendly for applications that do not need routing, reducing the volume of the project package.

Unlike components, it is recommended to use pages with a single root element (the VUe3 component supports multiple root elements) to support element roots that Nuxt can use to animate when switching routes between pages.

Dynamic routing

If the name is wrapped in square brackets in the file name, such as [id].vue, then [id] becomes a parameter in dynamic routing

We tried to make it a little harder by creating the temp-[name] folder in the Pages/file, and then creating [id].vue in the folder

Use NuxtLink to jump to the dynamic routing page in app.vue. See the vue-Router documentation for more uses of

.

<template> <div> <NuxtLink to="/temp-page/admin"> go to page-admin</NuxtLink> <NuxtPage /> </div> </template>Copy the code

{{$route.params.id}} use dynamic parameters in pages/temp-[name]/[id].vue

<template>
    <div>
	{{ $route.params.name }}-{{ $route.params.id }}
    </div>
</template>
Copy the code

Page -admin is displayed successfully

Embedded routines by

Nuxt gives RouterView an alias, the

component, to show the nested child components.

🌰

-| pages/
---| parent/
------| child.vue
---| parent.vue
Copy the code
// pages/parent.vue
<template>
    <div>
        parent
	<NuxtChild />
    </div>
</template>
Copy the code

If you browse the /parent/child path, you can see the contents of parent and child. If you only browse the /parent path, you can only see the contents of parent.

Vue represents the /parent path to display the parent’s contents. Parent. Vue also represents /parent to display the parent’s contents. If we create the index.vue file under /pages/parent/ and parent-vue file under /pages. As follows:

-| pages/
---| parent/
------| index.vue
------| child.vue
---| parent.vue
Copy the code

If we go to the /parent path, we will see two parent pages. If we go to the /parent/child path, we will see one parent page and one child page.

In this case, it is recommended to create an index.vue file under the parent file to represent the contents of /parent. It is not recommended to create a parent.vue file under the parent path to avoid unnecessary situations and help us focus on separation.

Routing in Nuxt participates in Vue consistency — Nuxt integrates vuE3, so how routing is used in this area is basically a matter of viewing vuE-Router documentation.

Ok, that’s enough for today, and we’ll explore more Nuxt gameplay tomorrow.