vue3路由传参&编程式路由导航

最新推荐文章于 2024-07-25 18:15:00 发布

枫落zz

最新推荐文章于 2024-07-25 18:15:00 发布

阅读量321

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_56489674/article/details/134819507

版权

一、路由传参

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>&nbsp;&nbsp; -->

        <!-- 跳转路由并携带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>&nbsp;&nbsp; -->

        <!-- 跳转路由并携带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>&nbsp;&nbsp; -->

        <!-- 跳转路由并携带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>