Dynamic routing and routing check the entry Nuxt

In fact, with dynamic routing is routing parameters. For example, we now have a lot of news module below details page news, this time we need the help of the dynamic routing.

News detail page
our news folder below the _id.vue new file, prefixed with an underscore Vue file is dynamic routing, then there is $ route.params.id in the file inside to receive parameters.

/pages/news/_id.vue

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

Modify News route
we revised the /pages/news/index.vue, add two pages of detailed routing news-1 and 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>

Dynamic parameter checking
to a page, check the correctness of parameter passing is necessary, Nuxt.js also prepared a calibration method of caring for us 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>

We used the validate method and passing in the params, then use regular check carried out, the return true if the regular normal access page, if it returns false into the 404 page.

Dynamic routing and routing check the entry Nuxt

Guess you like