init Error 解决方案

报错

PS C:\dev\nuxt> npx nuxi@latest init my-app
Nuxi 3.6.5                                                                                                    15:49:24

 ERROR  Error: Failed to download template from registry: fetch failed                                        15:49:24

解决方案

git clone -b v3 https://github.com/nuxt/starter.git <名称>

文件夹式Route命名

更改app.vue内容

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <NuxtPage />
  </div>
</template>

新建文件夹

mkdir ./pages

创建一个测试用的index.vue作为“/”路由

<!-- ./pages/index.vue -->
<template>
    <h1>This is index vue!</h1>
</template>

完成！你的第一个SSR网站就开始运行了

查看网页源代码你就会发现SSR的功劳

路由跳转

新建一个about.vue用于测试

<!-- ./pages/about.vue -->
<template>
    <h1>About Page</h1>
</template>

更改index.vue

<!-- ./pages/index.vue -->
<template>
    <nuxt-link to="/about">Go to about</nuxt-link>
    <h1>This is index vue!</h1>
</template>

此时你就可以通过点击链接跳转页面了

尝试build 和 preview

使用build和preview命令就行了

npm run build

npm run preview

动态路由

添加方括号

文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。

pages/
--- index.vue
--- detail-[id].vue

获取动态参数

<template>
  {{ $route.params.id }}
</template>

缺点：不好看，不符合规范：解决方案

创建一个文件夹包起来即可

pages/
--- index.vue
--- detail/
------[id].vue

嵌套路由

如果存在目录和文件同名，就制造了嵌套路由。比如下面目录结构：

pages/
--- detail/
------[id].vue
--- detail.vue
--- index.vue

会有下面的效果

{
  path: '/detail',
  component: '~/pages/detail.vue',
  children: [
    {
      path: '/:id',
      component: '~/pages/detail/[id].vue'
    }
  ]
}