Nuxt之路由配置

一. 简单路由

nuxt的路由是封装好的，直接在pages文件夹下创建页面就好。在pages文件夹下创建两个文件夹，分别命名为about和news，名字自己取就好

在about文件夹下创建文件index.vue，pages/about/index.vue，代码如下：

<template>
  <div>
    <h2>About Index Page</h2>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
    </ul>
  </div>
</template>

在news文件夹下创建文件index.vue，pages/news/index.vue，代码如下：

<template>
  <div>
    <h2>About Index Page</h2>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
    </ul>
  </div>
</template>

修改pages/index.vue，代码如下：

<template>
  <section class="container">
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'news'}">NEWS</nuxt-link>
      </li>
    </ul>
  </section>
</template>

预览页面，简单路由完成

二. 路由传参params

修改pages/index.vue文件，给新闻的跳转加上params参数，传递参数为2018

<template>
  <section class="container">
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'about'}">ABOUT</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name:'news',params:{newsId:3305}}">NEWS</nuxt-link>
      </li>
    </ul>
  </section>
</template>

在/pages/news/index.vue文件中，使用 $route.params.newsId 接收参数，注意：参数名一定要和params传过来的参数名一致，代码如下：

<template>
  <div>
    <h2>News Index Page</h2>
    <P>NewsId: {{$route.params.newsId}}</P>
    <ul>
      <li>
        <nuxt-link :to="'/'">HOME</nuxt-link>
      </li>
    </ul>
  </div>
</template>

预览页面，可以看到newsId已经传过来了

三. 动态路由和参数校验

动态路由

新闻详情页模板，创建/pages/news/_id.vue文件，以"_"为前缀的vue文件，就是动态路由，然后在里面用 $route.params.id 接收，注意：此处的id就是vue文件"_"后面的名字，代码如下：

/pages/news/_id.vue：

<template>
  <div>
    <h2>News-Content</h2>
    <p>NewsId: {{$route.params.id}}</p>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
    </ul>
  </div>
</template>

在父组件index.vue中，使用params传递id，注意：nuxt-link组件name名：news-id，news代表文件夹的名字，id代表传递的参数；

/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="{name: 'news-id',params: {id: 123}}">news-1</nuxt-link>
      </li>
    </ul>
  </div>
</template>

命令行：npm run dev，就可以看到参数传过来了

参数校验

进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )

/pages/news/_id.vue：

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

如果参数错误，会跳转到nuxt为我们准备的错误页面

四. 路由动画效果

全局路由动画

全局动画默认使用page（class名的前缀）来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。

/assets/css/common.css

/* 页面动画切换效果 */
.page-enter-active,
.page-leave-active {
  transition: opacity .3s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

然后在nuxt.config.js的css选项引入css文件：

css: ['~assets/css/common.css']

这个时候就会有渐隐渐现的动画效果了，注意：动画效果必须使用nuxt-link组件作为跳转链接

局部路由动画

局部路由只需要改变page名（class名的前缀），然后在页面组件的配置中加入transition字段即可，如改变about.vue的动画效果：

/assets/css/common.css中添加以下css：

/* 单独路由 */
.test-enter-active,.test-leave-active {
  transition: all .3s;
  font-size: 12px;
}
.test-enter,
.test-leave-active {
  opacity: 0;
  font-size: 40px;
}

/pages/about/index.vue;

<script>
  export default {
    transition: 'test'
  }
</script>

这样跳转到about页面的时候就有不一样的动画效果了

本文引用于技术胖nuxt教程，感谢胖哥