修罗

nuxt3路由
nuxt3路由1,app.vue添加<NuxtPage />标签作为路由占位,类似router-vie...
扫描右侧二维码阅读全文
14
2023/03

nuxt3路由

nuxt3路由

1,app.vue添加<NuxtPage />标签作为路由占位,类似router-view

<template>
  <div id="app">
    <NuxtPage />
  </div>
</template>

2,新建pages/index.vue

<template>
    <div>index</div>
</template>

3,访问项目根路径

image-20230314142805310.png

可以看出:page目录下文件路径名对应路由path,如:

  • page/index.vue 对应 localhost:3001/index,index可以不写,浏览器自动识别;
  • page/detail/user/detail-user.vue 对应 localhost:3001/detail/user/detail-user

动态路由

1,pages下新建bbs/[bbs_id]/[page].vue

image-20230314145544124.png

2,访问方式

  • 方式一
<NuxtLink to="bbs/1/2">bbs12</NuxtLink>
navigateTo(`/bbs/${pbbs_id}/${page}`)

3,获取路由参数

const route = useRoute()
console.log(route.params.bbs_id, route.params.page)

嵌套路由

image-20230314153228382.png

  • 新建page/user.vue
<template>
    <n-button @click="navigateTo('/user/detail')">/user/detail</n-button>
    <n-button @click="navigateTo('/user/setting')">/user/setting</n-button>
    <NuxtPage></NuxtPage>
</template>
  • 新建page/user/detail.vue
<template>
    <div>detail</div>
</template>
  • 新建page/user/setting.vue
<template>
    <div>setting</div>
</template>

image-20230314153323274.png

路由中间件

https://nuxt.com/docs/guide/directory-structure/middleware

  • 定义在middleware目录下

当你点击浏览器的刷新按钮,路由中间件会在服务端执行,浏览器显示页面后,会在浏览器再次执行。之后在浏览器切换路由只会在浏览器执行。

image-20230314160816928.png

  • 以下可以跳过服务端或客户端执行
export default defineNuxtRouteMiddleware((to, from) => {
    // 跳过服务端执行
    if (process.server) return
    // or 跳过客户端浏览器执行
    // if (process.client) return
})
Last modification:March 14th, 2023 at 04:12 pm

Leave a Comment