:::

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.  

 

 


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1855

計數器

今天: 2655265526552655
昨天: 3755375537553755
總計: 4458494445849444584944458494445849444584944458494