七月 6, 2018 | 前端與Vue

Nuxt基礎教學: 如何用Route來建立各式各樣的路徑

用過Vue一定明白,「配置路由」是多麼恐怖的事!然而,這些問題在Nuxt上都能輕鬆幫你解決,不只靜態、就連動態路由也能辦得到?

Nuxt自動配置路由

有用過Vue的都一定明白,要配置路由是多麼恐怖的事。然而,這些問題在Nuxt上都能輕鬆幫你解決。Nuxt本身就會依據 page 裡資料夾的建置來自動幫你生成路由。

pages/
	| blog/
		| index.vue
	| index.vue

因此,建立好資料夾的同時,直接寫以下方式就能進入該頁面。

 URL 

<br>

自訂動態頁面要如何配置?

上述的是靜態路由的寫法,當你具有多個頁面共同版型時,像blog這類的文章頁面,一個個命名是崩潰的...不管你多有毅力。所以聰明的Nuxt當然也能做到動態的路由唷。

官方示例為例:設置動態路由只要在該資料夾或者是.vue的檔案名稱之前,加上 _ (底線)就完成了,甚至能夠自訂參數作為頁面網址。當你有許多頁面是套用同樣版型時,像部落格就適合做成動態路徑是合適的。posts底下的 index.vue 是文章列表,而文章內頁要設置成動態路由,所以是 _id.vue。

pages/
	| posts/
		| _id.vue
		| index.vue
	| index.vue

<br>

在 page / posts / index.vue 中:

文章頁面要利用 api 來帶出資料,進行前建議先看一下所使用的資料結構 ( API參考官方API)。這部分建議參考 @nuxtjs/axios ( nuxt.config.js 寫入後,就不需再引入至檔案 )。 回到正題,下面這串是將 API 資料指給 res 後,再從選取 res.data 的100筆資料中的前五筆。

import axios from 'axios'

export default {
    asyncData({ req, params }) {
        // We can return a Promise instead of calling the callback
        return axios.get('https://jsonplaceholder.typicode.com/posts')
          	.then((res) => {
                // 將網址的資料指給res,並取前五筆資料,建議 console.log 以下兩點,來看其差異
                // console.log(res); 包含其它物件
                // console.log(res.data); 選取 100 筆資料
            	return { posts: res.data.slice(0, 5) }
          })
	}
}

<br>

因此,就可以在 index.vue 中使用 users 來撈出各種資料。而範例中是以 v-for 跑出 post,並以id作為動態路徑的參數。

&lt;li v-for="(post, index) in posts" key="index"&gt;
	{{ post.title }}
&lt;/li&gt;

<br>

所以在完成上述,應該會看到以下的畫面:

<br>

在 page / blog / _id.vue 中:

建議都可以 console.log 來觀察各個參數或變數是帶著怎樣的數據。另外,你可以加上 validate 來驗證路由是否正確,錯誤的話就連到404的頁面。

import axios from 'axios'

export default {
      async asyncData({ params }) {
      		// console.log(params); 點擊第三筆,結果:{id: 3}
       		 let { data } = await 
             axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
        	// console.log(data); 抓出點擊的該筆資料
        	return { post: data }
      },
      head() {
      		return {
            	// 頁面 title 設為該文章標題
                title: this.post.title
            }
      }
}

在 template 中,寫下要顯示資訊,這邊使用了 post 的標題與內容。

&lt;h1&gt;{{ post.title }}&lt;/h1&gt;
&lt;pre&gt;{{ post.body }}&lt;/pre&gt;

<br>

完成~

點擊進入頁面後,就能看到網址的變動以及內容呈現嘍。

<br>

結語

Nuxt路由很方便,在要使用動態路由的 .vue 的名稱前方加上 _ (底線)即可。所以重點要理解如何串接API,將資料取出來顯示,文章內容頁要如何去接受前頁傳來的參數。這部分可以去搜尋 @nuxtjs/axios 使用方法,就不用像上述每頁都 import axios。路由的部分,可參詳官方文件Nuxt的路由生成规则 等文章,都描述得很清楚。

hashtags: