vue 跳转路由传参数两种写法

最新推荐文章于 2026-01-19 08:00:00 发布

原创最新推荐文章于 2026-01-19 08:00:00 发布 · 551 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了在Vue.js中使用两种不同的路由参数传递方法：一种是在URL中不显示参数，通过name和params来传递；另一种则是直接将参数拼接到URL路径中进行传递。这两种方式各有优缺点，适用于不同的场景。

不在url中拼接参数

this.$router.push({name: 'page', params: {eventId: this.id}})

在url中拼接参数

this.$router.push({path: '/page/edit', query: { eventId: this.id }})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芃芃的坑

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

next.js中路由跳转的两种方式，以及地址栏传参和接受参数

业余前端的职业经历

05-30

1万+

因为公司的前台项目需要做seo优化，单页应用项目是不适合做seo的，然后就选择了next.js，之前是搞vue出身了，react简直就是个白纸，菜鸟。我们都知道如果在react中路由跳转使用，link 和 this.history.push 那么在 next中怎么跳转的呢，和怎么获取参数呢。其实也是这两种呢，只不过next可能封装了下吧也是link方式 import Link from "next/link" 使用注意它这个是使用的 href 好像和 react中还有点不用 reac

参与评论您还未登录，请先登录后发表或查看评论

vue路由跳转之【编程式导航与传参】

共同学习，共同成长

05-31

2729

vue路由有两种跳转方式 ---->编程式与声明式，本文重点讲解vue路由的【编程式导航】【编程式导航传参 ( 查询参数传参 & 动态路由传参 )】等内容，并结合具体案例让小伙伴们深入理解，彻底掌握！

【Vue】跳转外部链接并携带参数并触发

zero_or_hero_的博客

10-13

9291

需求：当平台运行多个系统时（"系统一"，"系统二" 都是不同时间段开发的）可以从"系统一"点击按钮跳转到"系统二"，并且完成 "系统二"登录操作，直接显示"系统二"的主页，可以视为两套系统使用相同的用户名密码

Vue-router路由跳转的两种方式与路由传参的方法

qq_37635012的博客

06-02

4219

路由的两种跳转方式路由跳转有两种方式：声明式和编程式。我们之前用的< router-link :to="…">< /router-link>创建 a 标签来定义导航链接属于声明式。我们还可以借助 router 的如下这些实例方法创建编程式导航: router.push router.push(…)它就等同于< router-link :to="…"> router.push(…)这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前

Vue-router跳转和 location.href的区别

qq_52181663的博客

07-21

417

引进 router，然后使用 router.push( /url )来跳转，使用了 diff算法，实现了按需加载，减少了 dom的消耗。其实使用 router跳转和使用 history.pushState()没什么差别的，因为 vue-router就是用了 history.pushState()，尤其是在 history模式下。使用 history.pushState( /url )，无刷新页面，使用 location.href= /url来跳转，简单方便，但是。

Vue界面跳转传递参数

m0_62990162的博客

11-02

4977

vue----router.go/push&location.href

python_web全栈

02-07

4004

0. router.go/push介绍：一句话，用来进行路径跳转的 1. 使用 router.go// 回到上一页首页 this.$router.go(-1) // 回到上一页首页 router.push // 普通的界面跳转(一般用于项目内的路径跳转) this.$router.push('/') location.href // 普通的路径跳转(一般用于项目外的路径跳转) location.href = 'https://element.eleme.cn/' ...

Vue路由跳转的五种方式

最新发布

萌新程序员的博客，觉得有用的可以点点关注

01-19

2977

做 Vue 开发，页面跳转是最基础也是最核心的高频需求，不管是后台管理系统还是各类业务项目，路由跳转都是实现页面切换的核心方式。Vue 作为单页面应用（SPA），核心优势就是「无刷新跳转」，页面切换流畅、体验好，这也是和传统多页面开发最大的区别之一。这篇文章会从零到一，把 Vue 路由跳转的所有用法、场景、注意事项讲透，Vue2 完全兼容、Vue3 单独标注，没有冗余内容，全是项目中能直接用到的实战写法，新手能看懂，老手能查漏补缺。

vue路由跳转的几种方式及参数获取

w_t_y_y的博客

12-08

9514

VUE路由跳转可以通过name跳转页可以通过path跳转，带参数的话参数可以封装在params中也可以封装在query中。 1）params传参数：类似post，html 取参 $route.params.id，script 取参 this.$route.params.id，刷新页面参数消失； 2）query传参数：类似get,url后面会显示参数，html 取参 $route.query.id，script 取参 this.$route.query.id，刷新页面参数还在。一、router-li

uniapp - 路由跳转及路由传值

技术共享，共同进步！

10-12

3709

uniapp 中路由跳转一. 使用 navigator 组件跳转（无参数）二. 调用 API 编程式跳转跳转（无参数）1. uni.navigateTo(OBJECT)2. uni.switchTab(OBJECT)3. uni.redirectTo(OBJECT)三. 使用 navigator 组件跳转（传参数）四. 调用 API 编程式跳转跳转（传参数） uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。使用navigator 组件跳转官网：https://un

Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)

AZURE060606的博客

05-06

5790

需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例。路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由。此时访问路由不会返回任何东西，并触发函数。其他与history基本没有区别。当添加token后便能正常访问。

Vue中如何使用路由跳转页面及传递参数

尘生杜若

01-18

1万+

在Vue中构建工程目录时，会有对话提示是否安装router，这里就不再多说，直接开始说一说vue中路由跳转的几种方法。使用之前需要在工程目录router文件夹中index.js文件中引入及配置路径。例如：一.router-link <router-link :to='/City'> //需要跳转到的页面的路径这是在视图层内标签形式的跳转方式，浏览器会将router-link...

Vue路由跳转+路由传参

一只前端小菜鸟

04-08

3525

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： location.href("index.html") 那么vue是基于路由的，那么怎么进行页面的跳转？路由。大家都知道vue的每个页面级组件需要配置路由才可以使用，那么跳转页面也就是控制路由的切换。例如：点击登录按钮，跳转到...

vue 路由跳转携带参数

小白成长记

06-29

2万+

vue 路由跳转携带参数的方式：一、方式跳转，1. 携带query参数，2. 携带params参数，3.将参数转换为props属性；二、编程方式跳转路由

VUE的路由跳转传值及以新页面跳转并携带参数

jinbiao8246的博客

01-06

1542

vue的路由传值有两种形式：第一种是带参数跳转（query）会在网址后面以?参数="***"的形式传参： this.$router.push( { path: '/detail', query:{shopid: item.id} } ); 获取： this.$route.query.shopid 第二种是不带参数跳转（par...

Vue3实战学习（Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)）(上)(7)

岁岁岁平安的博客

03-11

2039

本篇博客的内容：实现Vue3集成Vue-Router(路由)。详细讲到了<RouterLink>(路由跳转)、push('/xxx')与replace('/xxx')的编程式路由跳转、如何设置默认页面路由？最后详细的演示操作路由跳转的单个参数与多个参数传递的方式与获取传的参数。更多的《Vue3集成Vue-Router》内容将在下篇博客...