一、路由传参
1.携带params参数
message.vue
<template>
<div>
<ul>
<li v-for="m in states.messageList" :key="m.id">
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link
:to="{
name: 'Detail',
params: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const states = reactive({
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
});
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>
detail.vue
<template>
<ul>
<li>消息编号:{{ $route.params.id }}</li>
<li>消息标题:{{ $route.params.title }}</li>
</ul>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
// const router = useRouter();
const $route = useRoute();
// console.log(router);
console.log($route);
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>
2.携带query参数
路由表不变
message.vue
<template>
<div>
<ul>
<li v-for="m in states.messageList" :key="m.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link
:to="{
path: '/About/Message/Detail',
query: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const states = reactive({
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
});
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>
detail.vue
<template>
<ul>
<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
// const router = useRouter();
const $route = useRoute();
// console.log(router);
console.log($route);
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>
二、编程式路由导航
message.vue
<template>
<div>
<ul>
<li v-for="m in states.messageList" :key="m.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link
:to="{
path: '/About/Message/Detail',
query: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }}
</router-link>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const states = reactive({
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
});
const pushShow = (m: inter) => {
router.push({
name: "Detail",
query: {
id: m.id,
title: m.title,
},
});
};
interface inter {
id: string;
title: string;
}
const replaceShow = (m: inter) => {
router.replace({
name: "Detail",
query: {
id: m.id,
title: m.title,
},
});
};
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>
detail.vue
<template>
<ul>
<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
// const router = useRouter();
const $route = useRoute();
// console.log(router);
console.log($route);
</script>
<style scoped>
/* .child02 {
width: 400px;
height: 100px;
background-color: purple;
} */
</style>