nuxt-SSR渲染

最新推荐文章于 2025-04-13 20:00:00 发布

全栈开发ck

最新推荐文章于 2025-04-13 20:00:00 发布

阅读量247

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44954172/article/details/109066633

版权

Vue 专栏收录该内容

25 篇文章

订阅专栏

nuxt

安装
 api

npx create-nuxt-app .
官网

在这里插入图片描述

项目结构

目录结构
在这里插入图片描述

路由

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

动态嵌套路由
nuxt

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

vue router Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}