其實動態路由就是帶引數的路由。比如我們現在新聞模組下面有很多新聞詳情頁，這時候就需要動態路由的幫助了。

新聞詳細頁面
我們在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>NewID:{{$route.params.newsId}}</p>
        <ul>
 

            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
            <li><a href="/news/123">News-1</a></li>
            <li><a href="/news/456">News-2</a></li>
        </ul>
    </div>
</template>

<script
 
>
export default {

}
</script>

動態引數校驗
進入一個頁面，對引數傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate()。
/pages/news/_id.vue

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

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

/pages/news/index.vue

<template>
    <div>
        <h2>News Index page</h2>
        <p>NewID:{{$route.params.newsId}}</p>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
            <li><a href="/news/123">News-1</a></li>
            <li><a href="/news/a">News-2</a></li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

我們使用了validate方法，並把params傳遞進去，然後用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面。