[vue]路由传参的三种方式

已于 2022-06-15 21:10:36 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-06-15 09:34:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48047636/article/details/125290545
版权

1. 字符串路由传参

route下的index.js

 {
   
    path: '/search/:keyword',
    name: 'Search',
    component: () => import('../views/Search/index.vue'),
    meta:{
   
      show:true
    }

components下的header.vue

 this.$router.push(
         "/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()
       );

在这里插入图片描述

2. 模板字符串路由传参

route下的index.js同上

components下的header.vue

  methods: {
   
    goSearch() {
   
       this.$router.push(`/search/${
     this.keyword}?k=${
     this.keyword.toUpperCase()}`)
    },
  },

在这里插入图片描述

3. 对象路由传参

route下的index.js同上

components下的header.vue

 methods: {
   
    goSearch() {
   
       this.$router.push
最低0.47元/天 解锁文章
riverrun_z
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由传参的三种方式
鬼鬼的博客
09-17 1225
vue传参的三种方式: 先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去 <div class="examine" @click="insurance(2)">查看详情</div> 1.传递的参数会在url 地址栏显示 methods：{ insurance(id) { this.$router.push({ path: '/particulars', query: { id
【vue】vue路由传参的三种方式
热门推荐
hello world_
10-22 8万+
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 1、声明式 router-link 该...
详解vue路由传参的三种方式
小傲哥哥的博客
03-27 6742
在我们开发vue项目的时候，路由传参几乎是我们必须要用到的，一般出现场景是，当我们点击某个组件的某个按钮时跳转到另一个组件中，并携带参数，便于第二个组件获取数据。下面我就来说说vue路由传参的三种方式： 方案一： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path...
2024年最全vue路由传参的三种基本方式 - 流年的樱花逝 - SegmentFault 思否，2024年最新我阿里P7了解到的Web前端面试的一些小内幕
最新发布
2401_84436058的博客
05-14 477
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件方案一，需要对应路由配置如下：{path: ‘/describe/:id’,name: ‘D
vue路由传参方式的几种方式与获取参数详解
weixin_47013351的博客
04-17 2万+
一、声明式传参 1.params传参(显示参数) 在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数： //路由参数配置 const router = new VueRouter({ routes: [{ path: '/about/:id', component: User }] }) //声明式导航使用 <router-link to="/about/12">跳转</router-link>
Vue 路由传参的三种常用方法
JeffreytheCoder的博客
08-17 3635
在实现Vue多界面应用中，我们经常需要在页面跳转时讲数值传递到另一个页面，那么下面就来介绍下实现路由传参的三种方法。 一、Path后加参数 传递方法（id为参数） this.$router.push({ path: '/result/${id}' }) 接收方法 this.$route.params.id 二、Params属性 传递方法 this.$router.push({ path: '/result'， params: { id: id } }) 接收方法 t
vue路由传参三种基本方式详解
10-15
在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬编码。下面我们将详细探讨这三种方式及其应用场景。 ### 方案一：通过`params`传递参数 `params`是一种在...
vue路由传参的基本实现方式小结【三种方式】
01-19
传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 ...
vue路由传参 vue路由传参
11-18
Vue Router 提供了两种主要的参数传递方式：query 和 params。下面将详细介绍这两种方法，以及它们的特点和使用场景。 ### 1. Query 传参 **方法**：通过 `query` 对象传参，参数将以查询字符串的形式附加到 URL ...
3种vue路由传参的基本模式
08-28
Vue 路由传参的 3 种基本模式 在 Vue 中，路由传参是连接各个页面的桥梁，而参数在其中扮演着异常重要的角色，决定着两座桥梁是否能够连接成功。在 Vue 路由中，支持 3 种传参方式，即使用 `$router.push` 实现携带...
前后台分离的项目中，如何优雅的传输boolean类型的参数
tanzhou123的博客
04-25 9469
前言：需求 这是一个Spring + Angular前后台分离的项目，目前有一个查看作业列表的功能，并且已经设置了分页和几个查询参数，如图。 现在需要增加一个已评阅和未评阅的查询功能。 Work实体的属性如下： id: number; content: string; createTime: Date; item = new Item(); score: number; studen...
Vue之路由传参
m0_47195133的博客
12-09 253
路由传参的三种参数形式 params参数 query参数 props参数 params参数传递 方式一（显示参数的方式） ①router-link组件的to属性，该参数可以是一个字符串路径， //路由配置 { path: '/child/:keyword',//这里要:变量名，去充当一个占位符 component: Child } //父路由组件 <router-link :to="/child/123">进入Child路由</router-link> 这里在路径中把12
求助求助，关于vue $router.query传参 true/false 本地环境正常（本地string类型），生产环境自动转boolean类型的情况
Test_first的博客
03-21 380
vue 通过$router传入boolean值出现的一些小问题，求一个解释
Vue用query传值，Boolean参数失效的问题
tubing1996的博客
08-19 2450
用this.$route.query传值，true和false会转成string类型，导致Boolean值失效。可用eval() 函数进行转换，如： eval(this.$route.query.b)
使用vue-router传参时注意事项
weixin_44824839的博客
10-13 1640
name = null inviter=undefined this.$router.replace('/home',{ query: { openId: openId, //string name: name, //null inviter:to.query.inviter, //undefined //这里只是作为测试:路由参数类型只能是： 'string | (str
Vue多个路由绑定同一组件造成created不执行的解决办法（详解）
eagle_88的专栏
04-26 1万+
开发中遇到的需求是：多个页面调用同一组件，通过传参获取不同的数据展示在页面上。多个路由映射到同个组件，只是传参不同，页面切换不会触发组件的创建cteated方法，怎么办？官方给出的解决办法：https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8...
vue路由传参的几种方式
weixin_45332140的博客
03-11 2014
vue路由传参的几种方式 一 路由后直接携带参数 `例如：页面a跳转到页面b 页面a: 路由: 页面b: 路由: 二.利用params传参 例如：页面a跳转到页面b 页面a: 路由: 页面b: 路由: 三.利用query传参 例如：页面a跳转到页面b 页面a: 路由: 页面b: 路由: 总结:路由后直接携带参数传参和利用query传参，参数都会显示在url地址栏，刷新页面数据不会丢失；利用params传参数据不会显示在url地址栏但是刷新页面数据会丢失 ...
路由传参的几种方式（含params、query）
weixin_49346957的博客
05-28 1万+
前言：路由传参在vue项目中是很常用的 让我们用最简单的方法理解下3种路由的传参方式 先看一下用到到文件 有哪些 第一种 布尔值传参 1.需要在router文件夹中的index文件 配置路由 { //布尔值传参 path:'/A/:id', //布尔值传参这里必须要写成动态路由的格式 props:true, component:()=>import('@/views/A.vue') } 2.在App.vue中配置路由跳转 里面的aa是参数，也就是最后传过去的东西
Vue 组件传值
qing_bk的博客
12-09 945
一:父子传值 父传子 传 子组件标签内 属性名=值收 props:{ 属性名:{ type:类型,多个类型[Object,Array,String] default:基本数据类型直接写 复杂数据类型 ()=>({}) 或者 ()=>{return {}} required:true 必填 validator:(value)=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值