正常的路由跳转
-
路由文件
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path:"/",
name:"Home",
component: () => import("../views/Home.vue"),
},
{
path:"/about",
name:"About",
component: () => import("../views/About.vue"),
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
-
路由跳转
<template>
<router-link :to="'/about?id='+4">跳转到about页面</router-link> <br/><br/>
<router-link :to="{ name: 'About', query: { id: 1 } }">带参数跳转</router-link>><br/><br/>
<v-btn @click="toAbout(2)">编程式导航跳转</v-btn><br/><br/>
<v-btn @click="toAbout2(2)">编程式导航跳转</v-btn><br/><br/>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
const router = useRouter()
const toAbout = (id) => {
router.push('/about?id='+id)
}
const toAbout2 = (id) => {
router.push({
name:'About',
query:{id:id}
})
}
</script>
接下来，解决我们本篇文章的问题
将参数发送到路由而不将它们添加到url上
显然，如果不在 url 中显示，就不再可能通过参数发送属性。这时候我们可以使用state: { … }：
<template>
...
<p>------------解决方式如下-------------</p>
<router-link :to="{ name: 'About', force: true, state: { id: 1 } }">跳转到about页面</router-link> <br/><br/>
<v-btn @click="toAbout3(2)">编程式导航跳转</v-btn><br/><br/>
</template>
<script lang="ts" setup>
import {useRouter} from "vue-router";
const router = useRouter()
...
const toAbout3 = (id) => {
router.push({
name:'About',
state:{id:id}
})
}
</script>
现在在页面的代码中，我们可以从中读取属性history.sate并将值放入需要的地方。
<script setup lang="ts">
console.log(window.history.state.id)
const id = window.history.state.id
</script>
<template>
接收参数：{{id}}
</template>
<style scoped>
</style>
以上就是今天的文章分享，希望大家都能有收获哦！！！
原文始发于微信公众号（大前端编程教学）：Vue3 将参数发送到路由而不将它们添加到url上
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224144.html
