:::
14-4 nuxt.config.js
14-5 Nuxt 使用 Router
- 連結可以用 <NuxtLink to=""></NuxtLink > 或 <nuxt-link to=""></nuxt-link>，等同<router-link to=""></router-link>
- 巢狀路由（嵌套式路由），例如： /about/aaa 只要在 pages 下建立 about 目錄，底下建立 aaa.vue 即可（其中 <Nuxt /> 要換成 <NuxtChild />）
- 透過 vue router 去切換頁面的內容的時候在 nuxtjs 中我們使用 <Nuxt /> 這個組件來切換，而不是 <router-view />
<router-view /> -> <Nuxt /> - 在 nuxtjs 裡面我們需要點擊連結然後切換router的頁面的時候，我們會使用 <NuxtLink to="/about">about </NuxtLink> 這種方式來做為我們的連結
<router-link to="/">Home</router-link> -> <NuxtLink to="/">Home</NuxtLink> - 當我們在做嵌套網址的時候，我們會使用 <NuxtChild /> 來切換我們頁面的內容，而不是用原本的 <router-view />，這樣在識別的時候也會比較好識別這個組件是不是用嵌套網址
<router-view /> -> <NuxtChild /> - 如果要取得參數來切換內容，例如 show/1、show/2 可以建立 pages/show/_id.vue，asyncData可用context取得路由的參數：
<script> import axios from "axios"; export default { async asyncData(context) { const res = await axios.get( "http://blog.lces.tn.edu.tw/api.php?op=show&id=" + context.params.id ); return { news: res.data }; }, }; </script> - 若要在method中使用router，必須寫成 this.$router 的寫法，如：
methods: { goToNews(id) { this.$router.push("/show/"+id); }, },
