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教程，感謝胖哥