useRoute 及 useRouter

Vue.js 3.0 筆記

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）：
1. 傳入的參數：route.params
2. 傳庫的網址：route.path
useRouter()提供操作網址用的函式（例如： router.push("\Home") 用來轉向）：
1. 簡易轉向：
```
router.push("\Home") 
```
2. 轉向還可以這麼寫，未來可以塞入更多參數：
```
router.push({
  path: "\Home"
})
```
3. 回上頁：
```
router.go(-1)
```
4. 儲存網址（下例為開新分頁的函式）：
```
const openNewTab = (id) => {
  const routeData = router.resolve({ path: `/courses/${id}` });
  window.open(routeData.href, "_blank");
};
```