Nuxt.js学习(三)---Nuxt的动态路由、路由参数、路由嵌套

蔚落 2022-08-29 10:28 1465阅读 0赞

## 1、Nuxt的动态路由 ##

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的**以下划线作为前缀**的 Vue 文件 或 目录。

## 1.1、官方文档： ##

以下目录结构：

pages/
    --| _slug/
    -----| comments.vue
    -----| index.vue
    --| users/
    -----| _id.vue
    --| index.vue

![b7a8e1aa6511a998fdff9036d50db16e.png][]

Nuxt.js 生成对应的路由配置表为：

router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue'
        },
        {
          name: 'users-id',
          path: '/users/:id?',
          component: 'pages/users/_id.vue'
        },
        {
          name: 'slug',
          path: '/:slug',
          component: 'pages/_slug/index.vue'
        },
        {
          name: 'slug-comments',
          path: '/:slug/comments',
          component: 'pages/_slug/comments.vue'
        }
      ]
    }

![654bf1b16c60dbbbd316878f359b1dc5.png][]

你会发现名称为 `users-id` 的路由路径带有 `:id?` 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 `users/_id` 目录内创建一个 `index.vue` 文件。

## 1.2、实际操作(练习实例) ##

![236d9606c7bb184ae27e801ce886805c.png][]

1.2.1、/pages/news/\_id.vue(接收参数页面)

ids:[{
       {$route.params.id}}]
            Home

1.2.2、修改/pages/news/index.vue，加两个传递参数的路由

News Index page
        id:{
       {$route.params.Id}}
            Home
            id1
            id2

## 1.3、测试： ##

![862690cc3c2782bb21e2ed6e778df749.png][]

## 2、路由参数校验 ##

## 2.1官方文档： ##

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子： `pages/users/_id.vue`

export default {
      validate ({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
      }
    }

如果校验方法返回的值不为 `true`或`Promise`中resolve 解析为`false`或抛出Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

`/^\d+$/：以数字开头的一个或多个数字且以数字结尾的字符串。`

## 2.2、实际操作(练习实例)： ##

2.2.1、在/pages/news/\_id.vue加入上面官方代码

ids:[{
       {$route.params.id}}]
            Home

使用validate方法，把params传递进去，用正则校验，正则返回true正常进入页面，如果返回false进入404页面

![89038f9ef08ba757cc55eb37823c7b22.png][]

## 2.3、测试 ##

![ad33f54b327ab5dfc32fbc2760e21ab4.png][]

## 3、嵌套路由 ##

## 3.1、官方文档： ##

通过vue-router的子路由创建Nuxt.js应用的嵌套路由。

创建内嵌子路由，需要添加一个Vue文件，同时添加一个**与该文件同名**的目录用来存放子视图组件

**Warning:** 别忘了在父组件(`.vue`文件) 内增加  用于显示子视图内容。

假设文件结构如：

pages/
    --| users/
    -----| _id.vue
    -----| index.vue
    --| users.vue

![07d495299f8b2782570b4ceda439d4be.png][]

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

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

![7f623fe2cf6b804d77231ff75de9fe16.png][]

## 3.2、实际操作(练习实例)： ##

3.2.1、创建嵌套子路由，需要添加一个Vue文件，同时添加一个与该文件同名的目录用来存放子视图组件。

在pages里新建一个news.vue，文件夹我们已经有了，创建/news/newschild1.vue、/news/newschild2.vue子视图组件

![c115e56d4819ce5b71b4194f79aaee9f.png][]

3.2.2、/pages/news.vue

news Page
              Go to /home
              Go to /index
              Go to /newschild1
              Go to /newschild2
                嵌套子页面内容区

3.2.3、子组件index(默认页面pages/views/index.vue)

News Index page(嵌套子组件中的默认页面)
        id:{
       {$route.params.Id}}
            Home
            id1
            id2

3.2.4、newschild1.vue

嵌套子组件中的页面newschild1
            foobar：{
       {foobar}}

3.2.5、newschild2.vue

嵌套子组件中的页面newschild2
            foobar：{
       {foobar}}

## 3.3、测试： ##

![28da748ec56be2323d84878cdf5f1a46.png][]

文章来源: www.oschina.net，作者：庭前云落，版权归原作者所有，如需转载，请联系作者。

原文链接：https://my.oschina.net/tingqianyunluo/blog/3143264

[b7a8e1aa6511a998fdff9036d50db16e.png]: /images/20220829/7e293f5e60c042a3aa2041da0b1004e7.png
[654bf1b16c60dbbbd316878f359b1dc5.png]: /images/20220829/f3132d247acb4ec8a00d2e949f141c38.png
[236d9606c7bb184ae27e801ce886805c.png]: /images/20220829/f6c50c678be44509a5e1cc0840af8133.png
[862690cc3c2782bb21e2ed6e778df749.png]: /images/20220829/49e50be37a714a9eb1651d75c25899da.png
[89038f9ef08ba757cc55eb37823c7b22.png]: /images/20220829/5798203845a7416cb6c3e4d757d7c056.png
[ad33f54b327ab5dfc32fbc2760e21ab4.png]: /images/20220829/9ac012d4458e42f7b979aaef0df43e9d.png
[07d495299f8b2782570b4ceda439d4be.png]: /images/20220829/3fb8cd5e01524d05a52e30b99970797d.png
[7f623fe2cf6b804d77231ff75de9fe16.png]: /images/20220829/de56d0b3fd18496a8d4ffc5ecfefe9ef.png
[c115e56d4819ce5b71b4194f79aaee9f.png]: /images/20220829/da24c0caeaa14ce382fa7b75d092c92b.png
[28da748ec56be2323d84878cdf5f1a46.png]: /images/20220829/5b1145e0dd7241ba9af981c468f96e91.png