当前位置：首页 > news >正文

Nuxt.js静态生成与动态路由策略

news 来源：原创 2025/5/12 11:43:40

Nuxt.js 是一个基于 Vue.js 的通用应用框架，用于构建服务器端渲染（SSR）和静态生成（SPA）的 Web 应用。在 Nuxt.js 中，静态生成（Static Generation）和动态路由（Dynamic Routing）是两个关键概念。

静态生成（Static Generation）

原理：静态生成是指在构建时预渲染页面，将服务器端渲染的内容转化为静态 HTML 文件。这样，用户在访问网站时，无需服务器参与，可以直接从 CDN 加载页面，提高首屏加载速度。
配置：在 nuxt.config.js 文件中，可以通过 generate 配置对象来设置静态生成的选项，例如：

     module.exports = {
       generate: {
         dir: 'dist', // 输出目录，默认为 dist
         fallback: '404.html', // 未预渲染的路由的 fallback 页面
         routes: function() { // 自定义预渲染路由
           return [
             '/about',
             '/contact'
           ]
         }
       }
     }

命令：使用 npx nuxt generate 或 yarn generate 命令执行静态生成。

动态路由（Dynamic Routing）

原理：动态路由允许根据参数创建多个路由，如 /posts/:id，其中 :id 是一个动态段，可以匹配任何值。当用户访问这些路由时，Nuxt.js 将在服务器端生成相应的页面。
配置：在 pages 目录下，以 (.vue) 结尾的文件代表一个路由。动态路由的文件名通常包含方括号，例如 pages/posts/_id.vue，这表示一个接受 id 参数的动态路由。

     <template>
       <div>
         <h1>Post ID: {{ $route.params.id }}</h1>
         <p>{{ post.content }}</p>
       </div>
     </template>

     <script>
     export default {
       asyncData({ params }) {
         return axios.get(`https://api.example.com/posts/${params.id}`)
           .then(res => ({ post: res.data }))
           .catch(err => { throw new Error('Failed to fetch post') })
       }
     }
     </script>

Nuxt.js 的静态生成优化了首屏加载性能，而动态路由则提供了灵活的路由结构，支持数据驱动的页面生成。两者结合，使得 Nuxt.js 能够构建高性能的、内容丰富的 Web 应用。

结合静态生成与动态路由

预渲染动态路由

对于动态路由，虽然它们不能直接静态生成，但可以通过映射所有可能的动态参数值来预渲染一部分页面。例如，如果你有一个博客系统，你可以预先生成最近发布的100篇文章的静态页面。

在 nuxt.config.js 中的 generate.routes 函数内，你可以查询数据库或API来获取所有文章ID，然后返回这些动态路径数组。

   routes: async () => {
     const { data } = await axios.get('https://api.example.com/posts');
     return data.map(post => `/posts/${post.id}`);
   }