nuxt.js1-4

Nuxt的路由配置和參數傳遞

　簡單路由Demo

　　咱們如今根目錄的pages文件下新建兩個文件夾，about和news（模仿關於咱們和新聞的功能模塊，若是此處不清楚請看視頻）。

　　在about文件夾下新建index.vue文件，並寫入下面的代碼：

<template>
  <div>
      <h2>About Index page</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

　　在news文件夾下新建index.vue文件，並寫入下面的代碼：

<template>
  <div>
      <h2>News Index page</h2>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

　　修改原來的pages文件夾下的index.vue，刪除沒用的代碼，寫入下面連接代碼：

<template>
  <div>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/news">NEWS</a></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

　　這個小例子做完，你會發現這一切太簡單了，由於Nuxt.js都爲咱們做好了，不用寫任何配置代碼。

　<nuxt-link>標籤

　　雖然上面的例子跳轉已經成功，可是Nuxt.js並不推薦這種<a>標籤的做法，它爲咱們準備了<nuxt-link>標籤（vue中叫組件）。咱們先把首頁的<a>標籤替換成<nuxt-link>。

<template>
  <div>
    <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>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

　　咱們再次預覽頁面，也是能夠進行正常跳轉的，在實際開發中儘可能使用<nuxt-link>標籤的方法跳轉路由。

　params傳遞參數

　　路由常常須要傳遞參數，咱們能夠簡單的使用params來進行傳遞參數，咱們如今向新聞頁面（news）傳遞個參數，而後在新聞頁面進行簡單的接收。

　　咱們先修改pages下的Index.vue文件，給新聞的跳轉加上params參數，傳遞3306ID。

<template>
  <div>
    <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:3306}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

　　在news文件夾下的index.vue裏用$route.params.newsId進行接收，代碼以下。

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

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><a href="/">Home</a></li>
        <li><a href="/news/123">News-1</a></li>
        <li><a href="/news/456">News-2</a></li>
      </ul>
  </div>
</template>

　　代碼寫好後，打開npm run dev 進行查看，咱們已經進入了新聞詳細頁，並在詳細頁中取得了傳遞過來的新聞ID。

　動態參數校驗

　　進入一個頁面，對參數傳遞的正確性校驗是必須的，Nuxt.js也貼心的爲咱們準備了校驗方法validate( )。

　/pages/news/_id.vue

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

　　咱們使用了validate方法，並把params傳遞進去，而後用正則進行了校驗，若是正則返回了true正常進入頁面，若是返回false進入404頁面。