Nuxt3项目实战篇2---路由篇

上一章讲了安装与启动，这一篇我们开始学路由和多页面开发。这一篇我们开始学路由知识，路由包含：基础路由、动态路由和嵌套路由。

Nuxt3默认是不引入vue-router的。 创建了pages目录，Nuxt3会自动引入vue-router， 不创建则不引入，这样做的目的是为了打包的的体积更小。可以说是智能，但是也给初学者带来了困惑。

一、多页面路由

如果是多页面开发，需要在项目目录下创建pages目录，并且pages目录下需要有一个默认的index.vue默认文件作为入口。我们在pages目录下新建index.vue和aboutus.vue文件。 在index.vue中写入代码。目前我们的目录结构为：（不明白为啥这样创建的，可以阅读我的上一篇博客）

-- | .nuxt
-- |.output
 --|assets
  ----| style  
  ----| fonts 
-- |components
-- |composables
-- |content
-- |layouts
-- |middleware
-- |node_modules
-- |pages
---- | index.vue //默认
---- | aboutus.vue
--|plugins
--|public
--|server
.gitignore
app.vue //入口文件
.nuxtignore
nuxt.config.ts
package.json
tsconfig.json

来个题外话： 屏幕前的你是不是发现没有store文件夹？别慌，Nuxt3自带存储功能，不再需要额外引入vuex和js-cookie

项目中各个文件的内容如下

//在index.vue中写入
<template>
  <div>index</div>
</template>

//在aboutus.vue中写入
<template>
  <div>aboutus</div>
</template>

//app.vue
<template>
  <div>
    <NuxtPage></NuxtPage> 
    //<NuxtPage>是Nuxt自带的内置组件。
    //NuxtPage组件需要显示位于目录中的顶级或嵌套页面/pages。
    //相当于<RoutetrView>
  </div>
</template>

<NuxtPage>有两个参数： name, route, pageKey。这几个参数可以参考routerVIew的name和route.

访问localhost:3000/和localhost:3000/aboutus, 可以看到对应页面的内容。

让我们来分析一些，这两个页面是怎么来的：我们打开.nuxt/dev/server.mjs文件， 文件中有一个函数，这就是我们生成的路由了

const $id_1478324988 = async function (global, module, exports, __vite_ssr_exports__, __vite_ssr_import_meta__, __vite_ssr_import__, __vite_ssr_dynamic_import__, __vite_ssr_exportAll__) {
const __vite_ssr_import_0__ = await __vite_ssr_import__("/pages/aboutus.vue?macro=true");

const __vite_ssr_import_1__ = await __vite_ssr_import__("/pages/index.vue?macro=true");

__vite_ssr_exports__.default = [
  {
    name: "aboutus",
    path: "/aboutus",
    file: "G:/guanwang/nuxt3-guanwang/nuxt3-new/pages/aboutus.vue",
    children: [],
    meta: __vite_ssr_import_0__.meta,
    alias: __vite_ssr_import_0__.meta?.alias || [],
    component: () => __vite_ssr_dynamic_import__('/pages/aboutus.vue')
  },
  {
    name: "index",
    path: "/",
    file: "G:/guanwang/nuxt3-guanwang/nuxt3-new/pages/index.vue",
    children: [],
    meta: __vite_ssr_import_1__.meta,
    alias: __vite_ssr_import_1__.meta?.alias || [],
    component: () => __vite_ssr_dynamic_import__('/pages/index.vue')
  }
];
}

二、 基础路由完了，Nuxt3中怎样实现的嵌套路由和路由参数？

首先，我们还是看官方文档怎么说：https://v3.nuxtjs.org/guide/directory-structure/pages

1. 动态路由参数

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

如果文件和文件名中有中括号 "[]", 就代表该参数数一个动态参数。 且在页面中，我们可以直接通过$route对象访问组件内动态参数（组/ID）：

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

//导航到/users-admins/123将呈现： admins - 123

Nuxt3是基础vue3开发，所以，我们也可以使用composition API访问动态参数

<script setup>
const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('Warning! Make sure user is authenticated!')
}
</script>

2.嵌套路由 ： 首先，嵌套路由需要使用NuxtPage。之前是使用<NuxtChild> 刚刚看了一下文档，已经把<NuxtChild>升级为<NuxtPage>。 来个栗子

-| pages/
---| parent/
------| child.vue
---| parent.vue

此文件树将生成这些路由：

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

要显示 child.vue 组件，您必须在其中插入 <NuxtPage>组件 pages/parent.vue：

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

三、 路由都设计好了，Nuxt3怎么实现路由跳转？

在html中可以可以直接使用NuxtLink，

NuxtLink to="/parent/child">Parent</NuxtLink>
<NuxtLink to="/parent/child" target="_blank">Parent</NuxtLink> //打开空白页， 其实就相对于一个<a href>标签，当前nuxtlink里面也可以使用href, 只要属性中有to, href会自动被忽略
<NuxtLink to="/parent/child" rel="noopener">Parent</NuxtLink> //<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。

//编程式导航跟

navigateTo('/parent/child') //不带参数
function navigate(){ //带参数的写法
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}

当然你也可以使用vue-router的router.push(), 但是Nuxt3并不推荐

四、 Nuxt3的奇淫技巧：

我们是前端，虽然也是搬砖的，用点工具不比纯手工快且简便？该用的工具还得用起来。 sass, jslint, 用起来.sass的安装

npm install sass -D

虽然Nuxt3可以自动引入组件，但是静态资源文件和scss文件还得手动引入。 写相对路径太麻烦，我们可以直接使用nuxt的配置， 系统已经配置好，我们可以直接使用

{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

源码地址:https://gitee.com/running-team/nuxt3-app.git