14-5 Nuxt 使用 Router

1. 連結可以用 <NuxtLink to=""></NuxtLink > 或 <nuxt-link to=""></nuxt-link>，等同<router-link to=""></router-link>
2. 巢狀路由（嵌套式路由），例如： /about/aaa 只要在 pages 下建立 about 目錄，底下建立 aaa.vue 即可（其中 <Nuxt /> 要換成 <NuxtChild />）
3. 透過 vue router 去切換頁面的內容的時候在 nuxtjs 中我們使用 <Nuxt /> 這個組件來切換，而不是 <router-view />

   <router-view /> -> <Nuxt />

4. 在 nuxtjs 裡面我們需要點擊連結然後切換router的頁面的時候，我們會使用 <NuxtLink to="/about">about </NuxtLink> 這種方式來做為我們的連結

   <router-link to="/">Home</router-link> -> <NuxtLink to="/">Home</NuxtLink>

5. 當我們在做嵌套網址的時候，我們會使用  <NuxtChild /> 來切換我們頁面的內容，而不是用原本的 <router-view />，這樣在識別的時候也會比較好識別這個組件是不是用嵌套網址

   <router-view /> -> <NuxtChild />

6. 如果要取得參數來切換內容，例如 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>

    

7. 若要在method中使用router，必須寫成 this.$router 的寫法，如：

     methods: {
       goToNews(id) {
         this.$router.push("/show/"+id);
       },
     },

    

8.