nuxt3-路由（二）

最新推荐文章于 2025-05-01 08:38:22 发布

sober_e

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量707

点赞数 25

分类专栏： nuxt 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/sober_e/article/details/144592879

版权

nuxt 专栏收录该内容

2 篇文章

订阅专栏

【路由进阶】页面中使用layout

修改默认layout

default.vue是nuxt默认的页面布局，此布局不用定义所有页面共享

更新目录结构创建layouts文件夹和default.vue
更新app.vue文件引入NuxtLayout

<template>
  <NuxtLayout>
    <div>
      <NuxtLink to="/home">Home</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/product">productlist</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/product/detail/1">productdetail-1</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/mine">mine</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/mine/123">mine兜底1</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/mine/123">mine兜底2</NuxtLink>
    </div>
    <div>
      <NuxtLink to="/123123">404</NuxtLink>
    </div>
    {{ routeName }}
    <div><NuxtPage></NuxtPage></div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
console.log(router.getRoutes());
const routeName = computed(() => {
  return route.name;
});
</script>

创建布局，一定要有slot

<template>
  <h1>默认布局</h1>
  <slot></slot>
</template>

<script setup lang="ts"></script>

<style></style>

此时页面样式

新增指定页面layout

创建/layouts/home.vue文件

<template>
  <h1>home页面指定布局</h1>
  <slot></slot>
</template>

<script setup lang="ts"></script>

<style></style>

使用/pages/home.vue中引入以下代码。使用definePageMeta指定layout，同时也可以给layout传false代表不使用layout。（当一组页面要使用相同的样式时，需要配置嵌套路由）。

<template>
  <div>
    <NuxtLink to="/home/index1">跳转到home子页面</NuxtLink>
    <NuxtPage></NuxtPage>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "home",
});
</script>

此时页面样式

共享layout的嵌套路由

这里以home为例首先创建/pages/home.vue 和 /pages/home/index.vue， /pages/home/index1.vue目录结构如下,此时的/pages/home.vue则为入口，需要添加NuxtPage，见上方代码。此时home下的页面将使用home.vue中指定的layout。

下一篇更新nuxt路由传接参数，参数校验，路由中间件（等同于vue中的路由拦截）。