路由

103 阅读1分钟

路由出口

是页面出口,相当于Vue中的 ,默认指向 /pages/index.vue 页面;例如:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

注:Nuxt3中组件只能有一个根元素;

路由跳转

用于跳转到指定页面,如下:

<NuxtLink to="/detail">点击我跳转到/detail页面</NuxtLink>

28356828-4af66f5b88400fd3.png

路由传参

可以在目录或页面名称中添加中括号参数,系统会自动匹配识别路由中的参数;如下:

访问路由: /user-admin/100

路由参数的配置和获取:

28356828-4af66f5b88400fd3.png

嵌套路由

目录和文件同名,就形成了路由嵌套;如下图:

28356828-4af66f5b88400fd3.png

访问:/parent/,会加载名称为 index.vue 的子页面,因为 index 是默页面;

访问:/parent/child,会加载名称为 child.vue 的子页面;

官网

v3.nuxtjs.org/guide/direc…