Nuxt的动态路由及路由校验入门

Posted chen-cheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nuxt的动态路由及路由校验入门相关的知识,希望对你有一定的参考价值。

其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了。

新闻详细页面
我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数。

/pages/news/_id.vue

<template>
    <div>
        <h2>News-Content{{$route.params.id}}</h2>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </div>
</template>

技术图片

 

 

 修改新闻首页路由
我们在/pages/news/index.vue进行修改,增加两个详细页的路由news-1和news-2.

<template>
  <div>
    <h2>News Index page</h2>
    <p>NewsId: {{$route.params.newsId}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/123">news-1</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/456">news-2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

技术图片

 

 

 动态参数校验
进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate()。
/pages/news/_id.vue

<template>
  <div>
    <h2>News-Content [{{$route.params.id}}]</h2>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
    </ul>
  </div>
</template>

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

/pages/news/index.vue

<template>
  <div>
    <h2>News Index page</h2>
    <p>NewsId: {{$route.params.newsId}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/123">news-1</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/chencheng">news-2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

技术图片

 

技术图片

 

 

我们使用了validate方法,并把params传递进去,然后用正则进行了校验,如果正则返回了true正常进入页面,如果返回false进入404页面。

 

以上是关于Nuxt的动态路由及路由校验入门的主要内容,如果未能解决你的问题,请参考以下文章

Nuxt.js入门安装及灵活使用

Nuxt配置动态路由以及参数校验

Nuxt 中同一级别的多个动态路由可能吗?

nuxt路由及传参

Nuxt.js的学习路由组件的学习

生成后在 Nuxt SPA 中使用动态路由