第三十四节——组合式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>
相关推荐
前端开发与ui设计的老司机3 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人5 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景27 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互