初学vue3与ts：路由跳转带参数

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();
	// query
	function queryLink(){
		router.push({path:'/link',query:{name:'lin'}})
	}
	// params
	function 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=1
		if(route.currentRoute.value.query.id){
			linkData.value = route.currentRoute.value.query.id
		}
		// 用router.push跳转,用query带参数name=lin
		if(route.currentRoute.value.query.name){
			linkQuery.value = route.currentRoute.value.query.name
		}
		// 用router.push跳转,用params带参数age=666
		if(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，是以前可以用，现在变不一样了吗？有大佬知道告知下。谢谢！

代码007普通

打赏 收藏 海报 链接