Nuxt3路由跳转

2024-05-01 11:07
17人已看

学习这篇文章之前，需要具备使用Nuxt3框架搭建基础项目 ,如果有这个基础可以跳过.直接看下面的声明式路由跳转

声明式路由跳转

创建两个基础文件 ~/pages/index.vue 和 ~/pages/About.vue
⚠️一定要是index.vue不能够大写Index.vue，否则报错.

<!--
| ~/pages/
--| About.vue
--| index.vue
-->
<!-- ~/pages/index.vue -->

<template>
    <h1>Index page</h1>
    <NuxtLink to="/about">
        About page
    </NuxtLink>
</template>

<!-- ~/pages/About.vue -->
<template>
    <div>About.vue</div>
</template>

浏览器中将http://localhost:3000 ->修改为 http://localhost:3000/about
to="/about" 会替换成 About.vue 的页面.自然 index.vue 页面的内容就不展示

有其他疑问，请留言