VUE3路由传参

一、query传参

举例说明

路由名称、路由路径都支持跳转，参数在url上，以 /a/c?name=zhangsan&age=18形式出现，强刷维持状态

传参

<template>
  <div class="home_view">
    <el-button @click="handleClick">点击</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const name = ref("zhangsan");

const router = useRouter();

const handleClick = () => {
  router.push({
    // path: "/editor",
    name: "editor",
    query: {
      name: name.value,
    },
  });
};
</script>

接收

<template>B页面</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.name); // zhangsan
</script>

二、params传参，接收undefined,现在已经不使用这种方式

原因参考

三、state传参

只支持路径跳转，参数不在url上出现，强刷状态不消失【不适用ssr】

传参

const handleClick = () => {
  router.push({
    path: "/editor",
    state: {
      name: name.value,
    },
  });
};

接收

<template>B页面</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(history.state.name); // zhangsan
</script>

四、路径拼接传参

路由部分 editor/:id,editor/?:id 的区别就是id是否必传

   {
          path: "editor/:id", // 编辑器
          name: "editor",
          component: () => import("@/views/editor/index.vue"),
        },

传参

const handleClick = () => {
  router.push({
    path: `/editor/${id.value}`,    
  });
};

接收

<template>B页面</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params.id); // 0
</script>

5.碎碎念

1.组件或者页面通信方式有很多，基础打牢，选择简单快捷的方式

2.把容易忘记的点，整理下，基础部分是个熟能生巧的工作