SSR 商城实战笔记 | 踩坑总结 | Nuxt 路由

2023-09-15 21:45:29

Nuxt 路由
Nuxt 项目中路由的配置主要在 nuxt.config.js 文件中进行。

路由基础

page : 每个 vue 页面都是一个路由
layout : 布局文件，即页面模板
middleware : 中间件，可在路由进入或离开时执行某些操作
asyncData : 异步数据，可在路由进入时获取数据并传递给组件
head : 设置页面的 <head> 标签内容，如 <title>、<meta> 等

动态路由

动态路由是指路由路径中包含动态参数的路由。在 Nuxt 中，可以使用 :param 语法来定义动态参数。例如：

{
  path: '/user/:id',
  component: User
}

嵌套路由

嵌套路由是指在一个路由内定义子路由。在 Nuxt 中，可以使用 children 选项来定义子路由。例如：

{
  path: '/user',
  component: User,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'settings',
      component: Settings
    }
  ]
}

路由守卫

路由守卫是可以在路由进入或离开时执行某些操作的钩子函数。在 Nuxt 中，可以使用 beforeEnter、beforeLeave、beforeResolve 和 afterEach 这四个钩子函数。

beforeEnter : 在路由进入前执行
beforeLeave : 在路由离开前执行
beforeResolve : 在路由解析完成前执行
afterEach : 在路由解析完成后执行

路由使用经验教训

在使用 Nuxt 路由时，需要注意以下几点：

避免使用 next() 函数 : 在路由守卫中使用 next() 函数会导致路由导航中断，从而导致页面无法加载。
谨慎使用 asyncData() 函数 : asyncData() 函数在每次路由进入时都会执行，这可能会导致性能问题。因此，应尽量避免在 asyncData() 函数中执行耗时操作。
使用 middleware 来处理数据预取 : middleware 可以在路由进入前执行，这使得它非常适合用于数据预取。
使用 head 选项来设置页面的 <head> 标签内容 : 这可以避免在每个页面中重复设置 <title>、<meta> 等标签。