[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)
  }
}

如果校验方法返回的值不为 truePromise中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>

3.3、测试:

Logo

前往低代码交流专区

更多推荐