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

index-router

html 复制代码
<!-- 路由跳转 -->
<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

html 复制代码
<!-- 路由 - 目标页面 -->
<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

js 复制代码
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

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

ps :vue3目标页面要拿到上一页面带过来的参数,不能用route.query ,要用route.currentRoute.value.query 或者route.currentRoute.value.params,是以前可以用,现在变不一样了吗?有大佬知道告知下。谢谢!

相关推荐
烛阴17 分钟前
Mix
前端·webgl
代码续发29 分钟前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_1 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante2 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript