第三十四节——组合式API使用路由

<template>
<div><div>我是第一个页面</div><button @click="link2">跳转到第二个页面</button></div>
</template>
<script setup>// 从vue-router引入 useRouter这个钩子import { useRouter } from 'vue-router'// 初始化这个钩子并赋值给routerconst router = useRouter()// 跳转到页面2const link2 = () => {// 使用我们刚声明的router跳转router.push('/v11')}</script>

页面传值，传值方式和vue2.x的路由一样，也是query和params，但是接收参数的形式有所不同

传值页

<template><div><div>我是第一个页面</div><button @click="link2">跳转到第二个页面</button></div>
</template>
<script setup>
// 从vue-router引入 useRouter这个钩子
import { useRouter } from 'vue-router'// 初始化这个钩子并赋值给router
const router = useRouter()// 跳转到页面2
const link2 = () => {// 跳转你的时候传一个id为1router.push('/v11?id=1')
}</script>

接收页

<template><div>我是第二个页面</div>
</template>
<script setup>
import { useRoute } from 'vue-router'// 初始化useRoute并赋值给route
const route = useRoute()// 获取query的参数
console.log(route.query)</script>