Nuxt3中的路由 NuxtLink

目录

 普通路由

路由跳转

路由传参

动态路由

嵌套路由

---

给app.vue中 添加<NuxtPage/>标签（相当于vue2中router-view标签）,再在根目录新建 pages 文件夹，添加 index.vue文件，这样当访问localhost:3000/ 时，就不会去访问app.vue，而是 pages/index.vue 页面了 。（经测试，此时就算把app.vue删掉，项目依然是可以运行的）

 普通路由

<template>
    <h1>a</h1>
</template>

注意：访问localhost:3000/index 会报错：

路由跳转

 使用 <NuxtLink/> 标签

<template>
    <h1>首页</h1>
    <NuxtLink to="/a">去 a 页面</NuxtLink>
</template>

使用navigateTo（）

<template>
    <h1>首页</h1>
    <button @click="to_a">跳转到a页面</button>
</template>


<script setup>
const to_a = () => {
    navigateTo({
        path: "/a",
        query: { name: "张三", age: 33 }
    });
}
</script>

 

路由传参

动态路由

通过 $route.params 接受参数 

 文件夹中也可以传递变量：

嵌套路由

在根目录创建一个与父页面同名的文件夹，比如父页面是 parent.vue, 那就在根目录创建一个 parent 文件夹，在 parent.vue 父页面里面加入 NuxtPage 组件，即可在父页面里面动态展现子页面