vue3中使用router路由实现跳转传参

这篇具有很好参考价值的文章主要介绍了vue3中使用router路由实现跳转传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。

前言

vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同。
我们今天主要讲router.push(location, onComplete?, onAbort?)
vue3中新增API:useRouter和useRoute


一、路由跳转

1.首先在需要跳转的页面引入API—useRouter

import { useRouter } from 'vue-router'

2.在跳转页面定义router变量

//先在setup中定义
 const router = useRouter()

3.用router.push跳转页面

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4.如果有参数的话,在接收页面引入API–useRoute

import { useRoute } from 'vue-router'

5.在接收页面定义变量route,获取传过来的变量

//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

二、页面传参需要注意

1.如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }})
router.push({ path: `/user/${userId}` })
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }})

2.上述规则同样适用于 router-link 组件的 to 属性
3.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)

总结

以上就是本章的全部内容,希望本章能够帮助到您。文章来源地址https://www.toymoban.com/news/detail-408610.html

到了这里,关于vue3中使用router路由实现跳转传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React V6路由跳转,跳转传参(params,search,state)

    注意:以下代码为个人笔记,不全,需自行调整,方可使用 公共跳转方法

    2024年02月11日
    浏览(44)
  • vue通过router地址传参跳转同一路由页面,页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题,其中就涉及到了不同路由的跳转(/a/b1 = /a/b2)、相同路由不同参数间的跳转(/a/b?c=1 = /a/b?c=2)、相同页面锚点跳转(/a/b#id1 =/a/b#id2) 原因:渲染的是同一组件 解决:可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(58)
  • 路由跳转和传参(vue3)

    准备工作:安装了路由,配置了路由表,全局注册了路由 ​ vue3路由官方文档 安装路由 npm yarn 路由跳转 首先在需要跳转的页面引入 API---useRouter 在跳转页面定义router变量 用 router.push跳转页面 (导航到不同的位置) 用router.replace(替换当前位置) 用router.go横跨历史 路由传参 一.标

    2024年02月10日
    浏览(43)
  • Vue3 - 实现路由 “新开一页“ 进行页面跳转功能,Router 路由跳转时在新窗口打开页面(网站跳转页面时浏览器新开页签打开网页,支持在页面、纯 js/ts 文件中使用,详细示例代码教程)

    网上这方面教程很少,本文提供多种解决方案,适用于任何场景。 本文 实现了在 vue3 项目开发中,当页面跳转时浏览器打开新窗口(新页签)跳转,Router 路由跳转并新开一页教程, 无论您是在普通页面、纯 js/ts 文件中,都可以使用, 如下图所示,当执行路由跳转时浏览器

    2024年02月03日
    浏览(60)
  • vue3路由跳转params传参接收不到

    这样路由可以跳转过去,但接收到了params是一个空对象 原因:由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。 vue推荐的路由跳转传参方法: 1.使用query传递参数 2.使用vuex、pinia对参数进行存储 3.使用 History API 方式传递和接收

    2024年02月09日
    浏览(46)
  • vue3路由跳转params传参接收不到?

    一、之前的用法 这样路由可以跳转过去,但接收到了params是一个空对象。 二、解决方法 通过查找资料,发现了原因。 https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。 vue推荐的路

    2024年02月12日
    浏览(43)
  • 【Vue3/Vue2】判断设备是移动端还是pc端跳转不同路由router

          APP文件中写入js代码 1、首先,通过 isMobile() 函数判断用户的设备类型。该函数使用正则表达式匹配 navigator.userAgent 字符串,以确定用户是在移动设备上访问网页还是在桌面设备上访问网页 2、然后,在 onMounted() 钩子函数中,根据当前的路由路径来判断是否需要进行重定

    2024年01月16日
    浏览(61)
  • <React-Router>超全react路由知识点(跳转、传参、子路由、重定向等)

    目录 一、路由环境配置 1.搭建一个项目名为boke(自定义),编辑文档语言为TypeScript的项目环境。 2.安装所有package.json中的依赖----安装包(注意要【cd 项目名】进入项目文件安装) 3.添加React-Router路由 4.文件、目录相关修改与搭建 二、路由的懒加载  三、路由跳转 1.标签跳转(

    2024年02月11日
    浏览(89)
  • vue3+axios+router实现页面跳转及登录

    本篇文章主要是,使用 vite 创建一个vue3 书籍商城的小型案例,项目中主要运用到路由router及接口axios等知识点。 1.开始搭建项目框架,使用vite来构建项目 2.由于vite构建的项目中需要自己手动下载路由以及创建路由文件夹,所以在创建好的项目文档中找到src文件夹,在src文件

    2024年02月04日
    浏览(52)
  • JS中跳转传参的几种方法

    在JavaScript中,页面跳转并传递参数主要有以下几种方法: 1. 使用URL的查询字符串 这是最常见的方法,你可以在URL后面添加查询字符串来传递参数。查询字符串以 ? 开始,参数之间用 分隔。 例如: 在接收页面,你可以使用 window.location.search 来获取查询字符串,然后解析它来

    2024年04月26日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包