代码改变世界
[登录 · 注册]
  • 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页面。

     

  • 原文地址:https://www.cnblogs.com/chen-cheng/p/11970621.html
Copyright 2008-2020 晋ICP备12007731号-1