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

复制代码
<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 = () => {
    // 使用我们刚声明的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为1
  router.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>
相关推荐
tianchang1 小时前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖1 小时前
Vue3.0 Hook 使用好用多多
前端
~无忧花开~1 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D2 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠2 小时前
AJAX的学习
前端·学习·ajax
JNU freshman2 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼2 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉2 小时前
第十二周 waf绕过和前端加密绕过
前端
Asort2 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee2 小时前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack