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

最新推荐文章于 2025-04-14 22:26:17 发布

庭前云落

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量5.7k

点赞数 5

分类专栏：前端 --- Nuxt.JS 文章标签： vue java react js javascript

本文链接：https://blog.youkuaiyun.com/remsqks/article/details/108586449

版权

前端 --- Nuxt.JS 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨Nuxt.js中的动态路由及参数校验方法，包括如何定义带参数的路由、使用正则表达式进行参数校验，以及实现嵌套路由的步骤。通过实际操作示例，读者可以详细了解Nuxt.js路由配置的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[TOC]

1、Nuxt的动态路由

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

1.1、官方文档：

以下目录结构：

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

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'
    }
  ]
}

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

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

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

<template>
  <div>
    <h2>ids:[{{$route.params.id}}]</h2>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

};
</script>

<style>
</style>

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

<template>
  <div>
    <h2>News Index page</h2>
    <p>id:{{$route.params.Id}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="/news/123">id1</nuxt-link>
        <nuxt-link to="/news/456">id2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

1.3、测试：

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加入上面官方代码

<template>
  <div>
    <h2>ids:[{{$route.params.id}}]</h2>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id);
  }
};
</script>

<style>
</style>

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

2.3、测试

3、嵌套路由

3.1、官方文档：

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

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

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

假设文件结构如：

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

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'
        }
      ]
    }
  ]
}

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

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

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

3.2.2、/pages/news.vue

<template>
  <div class="container">
    <p>news Page</p>
    <ul>
      <li>
        <NuxtLink to="/">
          Go to /home
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/news">
          Go to /index
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/news/newschild1">
          Go to /newschild1
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/news/newschild2">
          Go to /newschild2
        </NuxtLink>
      </li>
    </ul>
       <hr>
        <div class="box">
            <p>嵌套子页面内容区</p>
            <!-- <nuxt-child>标签在父页面组件中相当于是子页面组件的占位符；嵌套中这个不可少 -->
            <nuxt-child keep-alive :foobar="2233"></nuxt-child>
        </div>
  </div>
</template>


<script>
export default {

}
</script>

<style>

</style>

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

<template>
  <div>
    <h2>News Index page(嵌套子组件中的默认页面)</h2>
    <p>id:{{$route.params.Id}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="/news/123">id1</nuxt-link>
        <nuxt-link to="/news/aaa">id2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

3.2.4、newschild1.vue

<template>
    <div>
        <h2>嵌套子组件中的页面newschild1</h2>
        <p>foobar：{{foobar}}</p>
    </div>
</template>
<script>
export default {
    props:['foobar']
}
</script>
<style scoped>
 
</style>

3.2.5、newschild2.vue

<template>
    <div>
        <h2>嵌套子组件中的页面newschild2</h2>
        <p>foobar：{{foobar}}</p>
    </div>
</template>
<script>
export default {
    props:['foobar']
}
</script>
<style scoped>
</style>