本文介绍: 【用router.push跳转,用params带参数age=666】这个方法的router->index.ts。// 用router.push跳转,用query带参数name=lin。// 用router.push跳转,用params带参数age=666。，是以前可以用，现在变不一样了吗？:vue3目标页面要拿到上一页面带过来的参数，不能用。// 用router–link跳转带参数id=1。其他2中方法的router->index.ts。
<!-- 路由跳转 -->
<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，是以前可以用，现在变不一样了吗？有大佬知道告知下。谢谢！
原文地址:https://blog.csdn.net/qq_32707555/article/details/134602854
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_3527.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
