Vue3語法糖-路useRoute和useRouter

$route 路由信息對象，path,parms,has,query
$router路由實例對象，路由的跳轉，鉤子涵數

Vue3語法糖-路useRoute和useRouter

• params（動態路由）路由設定參數params 可以不顯示在 URL 裏
• 重刷頁面後會失去 params 資料，但 query 資料仍存在

<template>
<div>
    <ul>   
        <li @click.prevent="$router.push('/admin')">教師列表</li>
        <li @click.prevent="$router.push('/admin/schedules')">教師課程表</li>
        <li @click="handleSignOut">登出</li>
    </ul>
</div>
</template>

<script setup>
 import { useRoute, useRouter } from 'vue-router'
 // 申明
 const route = useRoute()
 const router = useRouter()
 // 獲取query
 console.log(route.query)
 //  獲取params
 console.log(route.params)
 // 路由跳轉
 router.push({
     path: `/index`
 })
 //router.push('/admin/index')
 //router.push(`talk/${item.id}`)
</script>

範例query 傳參數

openItem(item)函式打開 傳query到網址
products.vue

<template>
   <div class="products">
    <div class="item"
    v-for="(item,index, UID) in lists" :key="UID">
      <a @click="openItem(item)"> <div class="card">
            <img :src="item.imageUrl">
                {{ item.title }}
        </div></a> 
    </div>
   </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { listType } from '@/types/productsType';

const router = useRouter();
const openItem = (item: any ) => {
    console.log(item.UID)
    router.push({
        path: `/product/${item.UID}`,
        query: item,
    })
}
const lists = ref<listType[]>([]);
// 獲取資料
const getData = async () => {
    try {
        const api = "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200";
        await axios.get(api)
        const res = await axios.get(api);
        console.log('culture', res.data, typeof res.data[0].masterUnit
            , 'otherUnit', typeof res.data[0].otherUnit, 'showInfos', typeof res.data[0].showInfo);
        if (res.status === 200) {
            lists.value = res.data;
        }

    } catch (error) {
        console.log(error)
    }
}
onMounted(() => {
    getData();
})
</script>

@/types/productsType.ts 的type 屬性

export interface listType {
    UID?: string;
    category?: string;
    comment?: string;
    descriptionFilterHtml?: string;
    discountInfo?: string | any;
    editModifyDate?: string;
    endDate?: string;
    hitRate?: number;
    imageUrl?: string;
    masterUnit?: object;
    otherUnit?: object;
    showInfo?: object;
    showUnit?: string;
    sourceWebName?: string | any;
    sourceWebPromote?: string;
    startDate?: string | any;
    subUnit?: object;
    supportUnit?: object;
    version?: string;
    title?: string | any;
    webSales?: string;
}

query 傳參數

product.vue

<template>
   <div style="width:40%;max-width:40%;margin:auto">
    <div>ID{{ route.query?.UID }}</div>
   <img style="width:100%;max-width:100%" :src="route.query.imageUrl">
     <div>{{ route.query?.title }}</div>
     <div>{{ route.query.masterUnit[0]}}</div>
   </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
onMounted(() => {
    const id = route.params.id;
    console.log('讀取動態參數id', id)
    console.log('route.query.UID', route.query.UID)
})
</script>

• 使用 useRoute 的 query

接受参数

範例params 傳動態參數

• params使用name

<template>
   <div class="products">
    <div class="item"
    v-for="(item,index, UID) in lists" :key="UID">
      <a @click="openItem(item)"> <div class="card">
            <img :src="item.imageUrl">
            {{ item.title }}
        </div></a> 
    </div>
   </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { listType } from '@/types/productsType';
const route = useRoute();
const router = useRouter()

const openItem = (item: any ) => {
    console.log(item.UID)
    router.push({
        name:'Product',//params使用name 傳參數
        params:{id:item.UID},
    })
}
const lists = ref<listType[]>([]);
const getData = async () => {
    try {
        const api = `${import.meta.env.VITE_API_URL}/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200`;
        await axios.get(api)
        const res = await axios.get(api);
        console.log('culture', res.data, typeof res.data[0].masterUnit
            , 'otherUnit', typeof res.data[0].otherUnit, 'showInfos', typeof res.data[0].showInfo);
        if (res.status === 200) {
            lists.value = res.data;
        }

    } catch (error) {
        console.log(error)
    }

}
onMounted(() => {
    getData();
    const id = route.params.id;
    console.log('讀取動態參數id',id)
})
</script>

接收參數：使用 useRoute 的 params product.vue

• filterItem函式過濾typeof item.UID===route.params.id =>typeof 檢查屬性
  return singleList.value = item

<template>
   <div style="width:40%;max-width:40%;margin:auto">
   <div>{{ singleList.title }}</div>
  <img style="width:100%" :src="singleList.imageUrl" >
    <div>{{ singleList.location }}</div>
   </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { listType } from '@/types/productsType';
const route = useRoute();

const singleList = ref<any>('');
const filterItem = () => {
    if (lists.value.length != 0) {
        lists.value.filter((item: any) => {
            console.log('typeof item.UID', typeof item.UID)
            console.log('typeof route.params.id', typeof route.params.id)
            if (item.UID === route.params.id) {
                return singleList.value = item
            }
        })
    }
}
const lists = ref<listType[]>([]);
const getData = async () => {
    try {
        const api = `${import.meta.env.VITE_API_URL}/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200`;
        await axios.get(api)
        const res = await axios.get(api);
        if (res.status === 200) {
            lists.value = res.data;
            filterItem();
           
        }

    } catch (error) {
        console.log(error)
    }

}
onMounted(() => {
    getData();
})
</script>

params傳參數與動態id ,過濾項目

query 與 params

項目	query	params
傳值配置	path	name，且在 params中配置 path 無效
参数	顯示在 URL 上	則不一定
参数	刷新頁面數據不會消失	刷新頁面會消失

參考資料