Nuxt3 Introduction – Page Routing (1)

The previous article talked about how we built a NuxT3 project. Today we will implement how to use page routing in NuxT3.

Conventional routing

Because NUxT integrates vue-Router, nuxt will automatically generate routes if you create a folder called Pages in the root directory of your project. The path of access is the path of the file.

Such as:

NuxtPage

Equivalent to route-view in vue-router

case

First we add
in app.vue, which is the route entry

<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>
Copy the code

Create a Pages folder in the root directory and create an index.vue file in the Pages folder

<template>
  <div>
    <h1>Hello Nuxt3</h1>
  </div>
</template>
Copy the code

The directory structure is as follows

Since the file name is index.vue, it is the default page, so directly enter http://localhost:3000 in the browser to access

NuxtLink

Equivalent to a route-link in vue-router

case

In the app. Vue added

<template> <div> <NuxtLink to="/test">test</NuxtLink> | <! -- Add --> <NuxtLink to="/"> root </NuxtLink> <! -- New --> <NuxtPage></NuxtPage> </div> </template>Copy the code

Add test.vue under Pages

<template>
  <h1>
    test
  </h1>
</template>
Copy the code

Click to switch

The root directory	test

trailer

The basic use of NUxT3 routing has been mastered, the next article on dynamic routing, parent-child routing nesting we will talk more slowly.