index-router

<!-- 路由跳轉 -->
<template><div><div class="title-sub flex"><div>1、用router-link跳轉帶參數id=1：</div><router-link to="./link?id=1"><button>點我跳轉</button></router-link></div><div class="title-sub flex"><div>2、用router.push跳轉,用query帶參數name=lin：</div><button @click="queryLink">點我跳轉</button></div><div class="title-sub pl-60">注：用router.push的query參數,router->index.ts為【path: '/link',】即可，router.push可用name也可用path</div><div class="title-sub flex"><div>3、用router.push跳轉,用params帶參數age=666：</div><button @click="paramsLink">點我跳轉</button></div><div class="title-sub pl-60">注：用router.push的params參數，需要在router->index.ts里更改【path: '/link/:age?',name:'link'】，(ps:age后面的?代表這個參數可傳可不傳)，router.push要用name</div></div>
</template><script lang="ts" setup>import { useRouter } from 'vue-router';const router = useRouter();// queryfunction queryLink(){router.push({path:'/link',query:{name:'lin'}})}// paramsfunction paramsLink(){router.push({name:'link',params:{age:'666'}})}
</script><style>.index-title{font-size: 24px;font-weight: bold;}.title{font-weight: bold;font-size: 20px;padding-top: 20px;padding-left: 20px;}.title-sub{padding-left: 40px;margin-top: 10px;}.flex{display: flex;align-items: center;}.pl-60{padding-left: 60px !important;}
</style>

index-link

<!-- 路由 - 目標頁面 -->
<template><div><div class="title-sub flex" v-if="linkData"><div>用router-link跳轉拿到參數：{{linkData}}</div></div><div class="title-sub flex" v-if="linkQuery"><div>用router.push跳轉,用query帶參數，拿到的參數是：{{linkQuery}}</div></div><div class="title-sub flex" v-if="linkAge"><div>用router.push跳轉,用params帶參數，拿到的參數是：{{linkAge}}</div></div></div>
</template><script lang="ts" setup>import { ref,onMounted } from 'vue'import { useRouter } from 'vue-router';const route = useRouter();const linkData = ref<any>('')const linkQuery = ref<any>('')const linkAge = ref<any>('')onMounted(()=>{console.log("route:",route)console.log("route.currentRoute:",route.currentRoute)console.log("route.currentRoute.value:",route.currentRoute.value)console.log("route.currentRoute.value.query:",route.currentRoute.value.query)// 用router-link跳轉帶參數id=1if(route.currentRoute.value.query.id){linkData.value = route.currentRoute.value.query.id}// 用router.push跳轉,用query帶參數name=linif(route.currentRoute.value.query.name){linkQuery.value = route.currentRoute.value.query.name}// 用router.push跳轉,用params帶參數age=666if(route.currentRoute.value.params.age){linkAge.value = route.currentRoute.value.params.age}})
</script><style>.index-title{font-size: 24px;font-weight: bold;}.title{font-weight: bold;font-size: 20px;padding-top: 20px;padding-left: 20px;}.title-sub{padding-left: 40px;margin-top: 10px;}.flex{display: flex;align-items: center;}
</style>

【用router.push跳轉,用params帶參數age=666】這個方法的router->index.ts

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'// 靜態路由表
const routes: Array<RouteRecordRaw> = [{path: '/link/:age?',name:'link',component: () => import('../views/home/index-link.vue')}
]// 路由對象
const router = createRouter({history: createWebHistory(),routes
})export default router

其他2中方法的router->index.ts

{path: '/link',component: () => import('../views/home/index-link.vue')
}

ps:vue3目標頁面要拿到上一頁面帶過來的參數，不能用route.query，要用route.currentRoute.value.query或者route.currentRoute.value.params，是以前可以用，現在變不一樣了嗎？有大佬知道告知下。謝謝！