:::
9-2 加入連結
9-3 useRoute 及 useRouter
- 範例（\src\views\Courses\_id.vue）：
<script> import axios from "axios"; import { onMounted, onUnmounted, reactive, ref } from "vue"; import { useRoute, useRouter } from "vue-router"; export default { setup() { const route = useRoute(); const router = useRouter(); const pageDetal = reactive({ data: {} }); const isError = ref(false); let timer = null; onMounted(() => { axios .get(`https://vue-lessons-api.herokuapp.com/courses/${route.params.id}`) .then((res) => { pageDetal.data = res.data.data[0]; }) .catch((error) => { isError.value = true; pageDetal.data["error_message"] = error.response.data.error_message; timer = setTimeout(() => { router.go(-1); }, 3000); }); }); onUnmounted(() => { clearTimeout(timer); }); return { pageDetal, isError }; }, }; </script> <template> <div> <div v-if="!isError"> <h1>{{ pageDetal.data.name }}</h1> <h2>NTD: {{ pageDetal.data.money }}</h2> <img :src="pageDetal.data.photo" alt="" /> <div> <img :src="pageDetal.data.teacher?.img" alt="" /> <p>{{ pageDetal.data.teacher?.name }}</p> </div> </div> <h1 v-if="isError">{{ pageDetal.data.error_message }}</h1> </div> </template> <style></style> useRoute()取得所有 route 傳入的資料（在route.params中，例如route.params.id）：- 傳入的參數：
route.params - 傳庫的網址：
route.path
- 傳入的參數：
useRouter()提供操作網址用的函式（例如：router.push("\Home")用來轉向）：- 簡易轉向：
router.push("\Home") - 轉向還可以這麼寫，未來可以塞入更多參數：
router.push({ path: "\Home" }) - 回上頁：
router.go(-1) - 儲存網址（下例為開新分頁的函式）：
const openNewTab = (id) => { const routeData = router.resolve({ path: `/courses/${id}` }); window.open(routeData.href, "_blank"); };
- 簡易轉向：
