XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

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 /> 
 ```markup
 <router-view /> -> <Nuxt />
 ```
4. 在 nuxtjs 裡面我們需要點擊連結然後切換router的頁面的時候，我們會使用 <NuxtLink to="/about">about </NuxtLink> 這種方式來做為我們的連結 
 ```markup
 <router-link to="/">Home</router-link> -> <NuxtLink to="/">Home</NuxtLink>
 ```
5. 當我們在做**嵌套網址**的時候，我們會使用 <NuxtChild /> 來切換我們頁面的內容，而不是用原本的 <router-view />，這樣在識別的時候也會比較好識別這個組件是不是用嵌套網址 
 ```markup
 <router-view /> -> <NuxtChild />
 ```
6. 如果要取得參數來切換內容，例如 show/1、show/2 可以建立 pages/show/\_id.vue，asyncData可用context取得路由的參數： 
 ```javascript
 <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 的寫法，如： 
 ```javascript
 methods: {
 goToNews(id) {
 this.$router.push("/show/"+id);
 },
 },
 ```
8.

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1855

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器