前端(路由传参)

1、概念：
A、vue 路由传参的使用场景一般应用在父路由跳转到子路由时，携带参数跳转。
B、传参方式可划分为 params 传参和 query 传参；
C、而 params 传参又可分为在 url 中显示参数和不显示参数两种方式；
D、即vue路由传参的三种方式：query传参（显示参数）、params传参（显示参数）、params传参（不显示参数）2、常见场景：
A、点击列表详情，跳转到详情内页，传递id参数获取详情数据。
B、在输入框输入内容后，点击搜索，跳转到搜索页面，并把输入的内容一起带到搜索页面

 方式一：query传参（显示参数）

编程式父组件->>>子组件

定义两个组件

father.vue

<script setup>
import {useRouter} from "vue-router";
import Son from "./Son.vue";
let router=useRouter();
function goSon(){
  let o={
    name:'son',
    path:'/son',
    query:{name:'李四',age:23,subjects:['数学','语文','体育','历史','科学']},
  }
  router.push(o)
}
</script>

<template>
  <button @click="goSon">去儿子组件</button>

</template>

<style scoped>

</style>

son.vue组件

<script setup>
import {useRouter,useRoute} from "vue-router";

let router=useRouter();
let route=useRoute();
function goFather(){
  console.log(route.query)
  router.push('/father')
}
</script>
<template>
<button @click="goFather">去父亲组件</button>
  <br>
</template>
<style scoped>

</style>

测试结果

 方式二：params传参（显示参数）

params传参（不显示参数）也可分为 声明式 和 编程式 两种方式，与方式一不同的是，这里是通过路由的别名 name 进行传值的,需要配置路由name属性

let routers=[
    {
        path:'/father',
        name:'father',
        component:()=>import( '../components/Father.vue')
    },
    {
        path: '/son/:subjects?',
        name:'son',
        component:()=>import('../components/Son.vue')
    }
];
export default routers;

父组件传入参数

<script setup>
import {useRouter} from "vue-router";
import Son from "./Son.vue";
let router=useRouter();
function goSon(){
  let o={
    name:'son',
    path:'/son',
    params:{subjects:false}
  }
  router.push(o)
}
</script>

<template>
  <button @click="goSon">去儿子组件</button>
  <Son name="李四"></Son>
</template>

<style scoped>

</style>

子组件接收参数

<script setup>
import {useRouter,useRoute} from "vue-router";

let router=useRouter();
let route=useRoute();
function goFather(){
  console.log(route.params)
  router.push('/father')
}
import {defineProps}from'vue'
let prop=defineProps(["name"]);
</script>
<template>
<button @click="goFather">去父亲组件</button>

  <br>
  {{prop.name}}

</template>

<style scoped>

</style>

测试结果

常见错误：

不配置name属性

 子组件不写接收参数

配置路由时，单词写错

 配置单词一个都不能错

params传参与query传参区别：
1.使用query传参，类似于get请求；使用params传参，类似于post请求。
2.query的语法用于path编写的传参地址，也可用于name编写的传参地址；params的语法必须用于name编写的传参地址
3.query传递显示参数，刷新页面，参数不丢失；params传递不显示参数，刷新页面，参数丢失；params相对于query来说较安全一点