Vue Router(第三章)

query传参

  // 1
  // router.push({
  //   path: '/b',
  //   query: {
  //     id: 1,
  //     a: 2,
  //   },
  // })

  // 2
  router.push({
    name: 'B',
    query: {
      id: 1,
      a: 2,
    },
  })

B组件接收参数

<template>
  <div>B</div>
  <div>{{ route.query.id }}</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route, 'route')
</script>
<style scoped lang="scss"></style>

动态路由传参

 { path: '/b/:id', name: 'B', component: () => import('../components/B.vue') },

const jump = () => {
  router.push({
    name: 'B',
    params: {
      id: 1,
    },
  })
}

<div>{{ route.params?.id }}</div>