“Time is not wasted, creation is not stopped, this article is participating in the 2021 year-end summary essay contest

Nuxt3(1)

How to configure basic page routing in Pages

Wildcard routing

If you need a wildcard route, you can create it using a file called [… slug].vue. This will match all routes under that path, so it does not support any non-dynamic text.

Start by creating a directory

-| pages/
---| [...slug].vue
---| index.vue
---| admin.vue
Copy the code

When our URL is /, the route component index.vue will be matched

When our url is /admin, the route component admin.vue will be matched

The component […slug].vue is matched when the url is /aaa/BBB/CCC

Of course […slug]. Vue Slug can be [x].vue, [y].vue

[] square brackets can be arbitrary

[..slug].vue I could also use $route.params.slug to get a url that didn’t match / /admin, but it didn’t match /x/x

In the pages directory I tried to create […slug].vue [a].vue [x].vue wildcard it will match a [].vue file, all wildcard routing components in a directory to create only one

Add a user folder

-| pages/
---| user/
    ---| [x].vue
    ---| index.vue
---| [...slug].vue
---| index.vue
---| admin.vue
Copy the code
  1. access/usermatching/user/index.vuecomponent
  2. access/user/infoWill match/user/[x].vuecomponent
  3. So let’s say we delete[x].vueFile access/user/infoWill appear404 pages

Wildcard routing is not a complete substitute for incorrectly routed pages

navigation

Nuxt3 provides a

for vue-Rotuer’s

, which is used in the same way as vue-Router

If you want to learn more about

, read the Vue Router documentation for more information.

Embedded routines by

Nuxt3 replaces Vue-Rotuer’s

with

Through a file in the Pages directory

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

Nuxt generates the corresponding route configuration

[{path: '/parent'.component: '~/pages/parent.vue'.name: 'parent'.children: [{path: 'child'.component: '~/pages/parent/child.vue'.name: 'parent-child'}}]]Copy the code

We must insert

in pages/parent.vue when displaying child.vue component:

<template> <div> <h1> Parent Component </h1> <NuxtChild /> </div> </template>Copy the code

conclusion

When we use Nuxt3 to configure routes, building Nuxt3 according to the Nuxt3 Pages convention will help us generate the corresponding route config

  1. The file name under pages matches our path,[parameter]The correspondingParameters:
  2. The file name also matches the name in vue-router
    • [] – /user/[info]. Vue generates user-info for name
  3. <NuxtLink> <NuxtChild>Proprietary components
  4. A wildcard route can match all unmatched paths in the current directory