vue3路由

1、安装路由及配置（具体配置步骤可参考上篇）

npm install vue-router@next --save

2、路由传参

<template>
  <div class="card">
    <button @click="toQuery">C页面-query参数传递</button>
    <button @click="toParams">D页面-params参数传递</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

//第一种 query参数传递
const toQuery=()=> {
  router.push({
    path:'/c',
    query: {
      id:1,
      name:'张三'
    }
  })
}
//第二种 params参数传递
const toParams=()=> {
  router.push({
    name:'d',//params传参需要使用name进行指定路由，同时在路由配置需要修改，假设传递的是keyword
    params: {
      keyword: 1
    }
  })
}

</script>

<style scoped>

</style>

C组件接收query参数

<template>
    <div>我是C组件</div>
    <!-- 第一种query传参 -->
    <div>query参数{{queryData.query}}</div>
</template>
<script setup>
import { reactive } from 'vue'
import {useRouter,useRoute} from 'vue-router'
const route = useRoute()

let queryData = reactive({
    query: route.query
})

注：
vue3接收参数时，不管是query还是params，都装在router.currentRoute.value里面，所以要这么使用：

【router.currentRoute.value.params】

【router.currentRoute.value.query】

projectName = router.currentRoute.value.params.projectName
projectId = router.currentRoute.value.query.projectId

D组件接收params参数

<template>
    <div>我是D组件</div>
    <!-- 第二种params传参 -->
    <div>params参数keyword---{{paramsData.params.keyword}}</div>
</template>
<script setup>
import { reactive } from 'vue'
import {useRouter,useRoute} from 'vue-router'
const route = useRoute()

let paramsData = reactive({
    params: route.params
})

</script>

routes.js

**3、子路由，配置子组件的path不带 / **