Nuxt的路由配置和參數傳遞

學習前端框架都要學習路由機制，因爲路由可以體現我們的業務邏輯，把模塊串聯起來，讓程序換髮光彩。那簡單的說路由就是我們的跳轉機制，也可以簡單理解成鏈接跳轉。Nuxt.js的路由並不複雜，它給我們進行了封裝，讓我們節省了很多配置環節。

簡單路由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 {
  comments:{}
}
</script>

<style lang="less" scoped>

</style>

結果如下：

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

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

<template>
    <div>
        <h2>News Index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

pages文件夾下的index.vue

<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 {
}
</script>

<style>

</style>

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>