I initialized a Nuxt3 project yesterday and when I opened the project I found that the scaffolding for Nuxt3 was very slim. Everything from the command line to the directory structure of the project is very simple, so predecessors plant trees and descendants enjoy the shade. Today, record the Nuxt3 amazing routing experience.

  • Recognize a few new tags

    <! -- Nuxt3 home page, not clear how to achieve, feel like high-end atmosphere and grade -->
    <NuxtWelcome/>
    <! -- Router-view is a container that loads the page where the route points to -->
    <NuxtPage/>
    <! <NuxtPage/> <NuxtPage/> <NuxtPage/>
    <nuxt-child/>
    <! -- Router-link -->
    <nuxt-link to="xxx"></nuxt-link>
Copy the code

  • Make an extremely simple list of hyperlinks to articles

The article lists

// pages/index.vue
<template>
    <div>
        the minimalist article list
        <br>
        <nuxt-link to="./article-1">to article1</nuxt-link><br>
        <nuxt-link to="./article-2">to article2</nuxt-link><br>
        <nuxt-link to="./article-3">to article3</nuxt-link>
    </div>
</template>
Copy the code

The article details

// pages/article-[indexCode]/index.vue
<template>
    <div>Article id: {{$route. Params. IndexCode}}</div>
</template>
Copy the code

Effect of home page

Click article2 to access the details page

Point

  1. Create the Pages directory structure according to Nuxt3’s convention, and Nuxt3 has encapsulated routes for us based on this convention, which will eventually map our directory structure to the Router configuration

  2. Nuxt3 uses a file directory structure to map routes from configuration, saving developers the need to write routing configuration files, and it takes advantage of this advantage in routing parameters. In the example above, the directory where the details page resides is named crucially. Nuxt3 stores routing parameters through ‘[XXX]’

  1. This file directory corresponds to the following routing configuration
    import homepage from '.. /index.vue'
    import detailPage from './index.vue'
    export const router = [
        {
            path: '/'.component: homepage
        },
        {
            page: '/article/:id'}]Copy the code

  • Make an extremely simple TAB toggle child path

File directory

-| pages/
---| tab/
-----| tab1.vue
-----| tab2.vue
---| tab.vue
Copy the code

tab.vue

<template>
    <div>
        <nuxt-link to="/tab/tab1">to article1</nuxt-link><br>
        <nuxt-link to="/tab/tab2">to article2</nuxt-link><br>
        <nuxt-child />
    </div>
</template>
Copy the code

tab1.vue

    <template>
        <div>I'm tab1 content</div>
    </template>
Copy the code

Ponint

  1. Use the same directory and vue file to represent the parent-child relationship of the route
  2. Use the nuxT-Child tag as a container for child routing pages

  • conclusion

  1. Currently, the routing-based official does not advertise the configuration of route guard and redirection
  2. The watcher directory structure is not implemented yet, so you need to restart the directory structure after modifying the directory structure
  3. The route transmission parameter is usedroutereThe parmas attribute of query is not found
  4. useNuxtLinkWhen, the parameter to is misrepresented'. / TAB/tab1 'The route should match ‘/ TAB /tab1’ without a ‘. ‘, and there is no reason to add a ‘. ‘