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頁面。