初学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,是以前可以用,现在变不一样了吗?有大佬知道告知下。谢谢!

相关推荐
lyj1689971 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui