正常的路由跳转
路由文件:
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>
console.log(window.history.state.id)
const id = window.history.state.id
</script>
<template>
接收参数:{
{id}}
</template>
<style scoped>
</style>
***注:在使用state的过程中存在一个问题,就是值无法自动置空【刷新页面无法清除,值还在】