组件：写在这里的 vue 文件会直接注册成组件，它们将在整个应用程序中自动可用，而无需显式地导入它们。
页面： 写在这里的 vue 文件会直接注册成页面 ，所有的页面都要写在这个文件夹里面，并且当前页面的路由路径就是文件名。
<router-link></router-link>。<template>
<header>
<nav>
<ul>
<li><NuxtLink to="/about">About</NuxtLink></li>
<li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
<li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
</ul>
</nav>
</header>
</template>
<router-view></router-view>。[参数名].vue，示例如下。[id].vueshop-[name].vue<template>
<div>
<NuxtLink to="/99">去动态页面，参数id=99</NuxtLink>
<NuxtLink to="/bag">去动态页面，参数name='bag'</NuxtLink>
</div>
</template>
<template>
<div>动态参数为{{ route.params.id }}</div>
</template>
<script lang="ts" setup>
const route = useRoute();
</script>
parent.vue 文件、parent 文件夹。child-one.vue 文件、child-two.vue 文件。<template>
<div>
<NuxtLink to="/parent/child-one">子页面one</NuxtLink>
<NuxtLink to="/parent/child-two">子页面two</NuxtLink>
<!-- 如果parent下有index.vue，路由如下 -->
<NuxtLink to="/parent">子页面index</NuxtLink>
</div>
</template>
<script setup>块或 Vue 组件的 setup() 方法中使用，以访问当前路由细节。<script setup>
const route = useRoute();
// 当路由地址为 /posts/1, 输出 1
console.log(route.params.id);
</script>
routerBeforeEachexport default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if an user is authenticated
if (isAuthenticated() === false) {
return navigateTo("/login");
}
});
default.vue，会自动注册名为 default 的模版。<template>
<div>
<div>header</div>
<slot></slot>
<!-- 具名插槽 -->
<slot name="one"></slot>
<div>footer</div>
</div>
</template>
<template>
<div>
<NuxtLayout name="default">
<div>页面主要内容</div>
<template #one>放在插槽one中的内容</template>
</NuxtLayout>
</div>
</template>
| components/
--| TheHeader.vue
--| TheFooter.vue
Copy to clipboard
layouts/default.vue
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template>
Lazy 前缀。<template>
<div>
<TheHeader />
<slot />
<LazyTheFooter />
</div>
</template>
export const useFoo = () => {
return useState("foo", () => "bar");
};
// 它将作为 useFoo()导出 （驼峰不带扩展名的文件名大小写）
export default function () {
return useState('foo', () => 'bar')
<template>
<div>
{{ foo }}
</div>
</template>
<script setup>
const foo = useFoo();
</script>
路由中间件是导航守卫，它接收当前路由和下一个路由作为参数。
export default defineNuxtRouteMiddleware((to, from) => {
if (to.params.id === "1") {
return abortNavigation();
}
return navigateTo("/");
});
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
// 页面过渡
pageTransition: { name: "page", mode: "out-in" },
// 布局过渡
layoutTransition: { name: "slide", mode: "out-in" }
}
});
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>