Nuxt架構的路由跳轉及傳參

最近做畢設的項目用到了Nuxt架構，路由跳轉一直在用到，有時候容易搞混，是以在這裡總結一下。大緻可以分成三種方式

第一種：url位址直接跳轉

在Nuxt架構自帶的pages檔案夾下建立檔案夾以及頁面。
（1）如果跳轉的url位址(路由位址)是“/course”，那麼架構就會自動幫我們處理，跳轉到pages檔案夾下course
檔案夾下的index.vue界面，命名要嚴格按照這種格式命名。
（2）如果跳轉的url位址是後面接了id，如<a :href="'/course/'+course.id" target="_blank" rel="external nofollow" />，那麼頁面就會跳轉至
_id.vue界面，這個檔案的命名是架構設定好的，是以必須這樣命名，前面要加_下劃線符号。
           

第二種：params 傳值(id會顯示在位址欄中，其他參數不會顯示在位址欄中)

this.$router.push({ name: "course-id",
					params:{
  							id:course.id,
							phonenum:this.mobile
							}
					})
觀察這個路由跳轉，name屬性值要看.nuxt檔案夾下的router.js檔案，注：這裡用name屬性或者path屬性都
可以，但是必須要跟router.js的内容相對應
           

params中的id屬性值就對應router.js檔案中path:"/course/:id"中後面的id，:符号在這裡表示一個占位
符，需要我們手動填值進去。
接收路由中的參數(接上面的傳遞)：this.$route.params.id和this.$route.params.phonenum。
注：params中定義的屬性名根據你自己的情況來，如果你跳轉的不是動态頁面(也就是_id之類，前面加了_的
動态頁面)，那麼就不需要聲明id屬性。但是params跳轉靜态頁面時，隻能使用name屬性，不能使用path屬性，
否則接收的時候接收不到參數。
           

如上圖所示，當跳轉的是靜态頁面時，要用name屬性，否則接收參數時接收不到。

第三種 query傳值(所有的參數都會顯示在位址欄)

this.$router.push({ name: "course-id",
					query:{
							id:course.id,
							phonenum:this.mobile
						   }
				  })
query用法其實跟params差不多，不同點就在于路由跳轉之後的位址欄顯示，前者所有的參數都會顯示在位址欄
中，而後者隻會顯示id，其他參數不會顯示。然後就是query不像params那樣，跳轉靜态頁面時，隻能使用name
屬性，query使用name和path都可以接收到參數。
query接收參數：this.$route.query.id和this.$route.query.phonenum。
           

其他注意事項

接收參數時，如需對參數進行判定，應該先判斷是否存在，如下：
           

必須先判斷query或者params是否存在，然後再判斷裡面的參數是否存在，不然會報錯(參數沒有定義)