Vue 路由的传参问题

最新推荐文章于 2023-11-28 14:54:39 发布
最新推荐文章于 2023-11-28 14:54:39 发布
阅读量562 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41838204/article/details/79652922
版权

此种传参方式不需要通过路由后面写:id这中方式

而是通过router-link方式传参

方法如下

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

之后在收到参数的页面中

用this.$router.params.userId

接受到参数

这样的话你就可以在this.$route对象中拿到传递的params值了


参考https://segmentfault.com/q/1010000009749320


快乐的大羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
＜router-link＞出现Error: No match for {“name“:“home“,“params“:{}}
m0_59519985的博客
04-16 1252
与传统的多页面应用不同，单页面应用可以实现快速的页面加载和无刷新的页面更新，提供更流畅的用户体验。在将标签换到的时候出现No match for {"name":"home","params":{}}这样的错误，其中格式并无错误，可是玄学的是：当我另起一行写,并把中的内容复制到时，错误却消失了，百思不得其解，有没有懂的佬可以分享一下。
Vue 传值问题
yangpan2014的博客
07-22 301
Vue常见的三种传值方式： 父组件传值给子组件，方法：在父组件中v-bing绑定属性和属性值，在子组件中用props接受这个属性； 子组件传值给父组件，方法：在子组件用this.$emit(事件名，值)发送，在父组件中用 @事件名="getData" 获取，getData(val)，val即使子组件传递过来的值 兄弟组件传值，方法：借用公共实例组件；或者子传父，父传子 这里以兄...
VUE面试题
weixin_52014130的博客
10-22 1025
VUE面试题：使用vue控制元素显示隐藏方式
在c++函数形参里引用临时变量出错，导致"no match for xxx"
huangbo10的专栏
12-20 4086
帮别人调代码遇到的一个bug。他的代码里首先定义了一个类colum，然后重载了等号“=”操作符，函数定义是void colum::operator=(colum& c2)。接着代码里写了一句a = colum();，希望临时构造一个colum对象并赋值给对象a。如果用g++编译这段代码，会遇到下面的错误信息：/ *your_code* : In function ‘int main()’: / *y
vue中路由跳转报错
小葵坤_易安的博客
06-28 2740
Error: Avoided redundant navigation to current location: "/X". 解决：在router文件夹下的index.js中加入代码： import Vue from 'vue' import Router from 'vue-router' import Chat from '../components/Chat.vue' import User from '../components/User.vue' import Find from '../com
点击div跳转的时候出现的问题，求各位大神帮忙，我真做不到了
最新发布
dill273195的博客
11-28 318
Uncaught Error: No match for {"name":"/jgtext","params":{"id":"9"}}
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
vue路由传参三种基本方式详解
10-15
Vue.js 是一个流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）导航的重要组成部分。在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬...
vue路由传参的基本实现方式小结【三种方式】
01-19
本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考，具体如下： 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 ...
vue路由传参页面刷新参数丢失问题解决方案
12-13
Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上...
3种vue路由传参的基本模式
08-28
Vue 路由传参的 3 种基本模式 在 Vue 中，路由传参是连接各个页面的桥梁，而参数在其中扮演着异常重要的角色，决定着两座桥梁是否能够连接成功。在 Vue 路由中，支持 3 种传参方式，即使用 `$router.push` 实现携带...
VUE 之 动态路由
夜阑珊妖妖
09-30 2223
动态路由： <router-link tag="li" :to="{name:'question', params:{id:question.questionId}}" v-for="question in questionList" :key="question.questionId"> {{ question.title }} </route...
11.Spring之AOP
工一木子
01-22 493
11、AOP 11.1、什么是AOP AOP(Aspect Oriented Programming)意为：面向切面编程，通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续，是软件开发中的一个热点，也是Spring框架中的一个重要内容，是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可用性，同时提高了开发的效率。 11.2、AOP在Spring中的作用 提供声明式事务；允许用户自定义切面 横切关
Uncaught (in promise) Error: No match for
在工作中记录下美好的瞬间~~
09-13 3554
总结出现这个问题的主要原因就是找不到指定路由，如果也遇见这个问题可以查一下是不是路由没有配置，或者没有权限访问。今日在写前端代码的时候，用vue-route遇到了一个问题，在跳转的时候发现报了这个错误。的时候没有访问权限，改一下后台权限设置就可以完美解决了。然后我也配置了路由，但是一直还是报错，最后发现是。如果还有问题未解决的问题，可以发在评论区解决。
Vue3 + vueRouter4.x 控制台No match found for location with path ‘/home‘ 解决
weixin_43630802的博客
03-06 2990
Vue3 + vueRouter4.x 控制台No match found for location with path '/home' 解决。
VUE 路由传参
qq_31207917的博客
05-13 127
vue路由带参总结 1. params <router-link :to="{name:'test', params: {id:1}}"> 配置路由格式要求: path: "/test/:id" js参数获取：this.$route.params.id 2.query <router-link :to="{name:'test', query: {id:1}}"> ...
vue route 路由跳转传递参数
tiechui1994的博客
09-21 1038
vue route 路由跳转传递参数 使用 $router 方式 源组件: <template> <button @click="sendParams"> 跳转 </button> </template> <script> export default { methods:{ sendParams() { this.$router.push({ path
Vue前端之路(四)---Vue Router
weixin_42211693的博客
06-23 215
目录 1.Vue Router概述 2.安装和引用 3.基础路由使用 3.1.一级路由 3.2.动态路由传参（基础写法） 3.3.重定向路由和404路由 3.4.嵌套路由 3.5.声明式导航和编程式导航 4.命名路由和命名视图 4.1.命名路由 4.2.命名视图 5.动态路由传参（改进写法） 6.导航守卫 6.1.全局前置守卫 6.2.全局后置钩子 6.3.路由独享的守卫 7.路由元信息 1.Vue Router概述 Vue Router是vue官方的路由管..
vue-router.mjs:798 Uncaught (in promise) Error: No match for
Wkxb1的博客
06-28 1601
然后我也配置了路由，但是一直还是报错，最后发现是路由配置的时候没有访问权限，改一下后台权限设置就可以完美解决了。总结出现这个问题的主要原因就是找不到指定路由，如果也遇见这个问题可以查一下是不是路由没有配置，或者没有权限访问。今日在写前端代码的时候，用vue-route遇到了一个问题，在跳转的时候发现报了这个错误。如果还有问题未解决的问题，可以发在评论区解决。
vue路由传参query
10-26
在Vue中，路由传参有两种方式：params和query。params是通过路由路径中的占位符来传递参数，而query则是通过URL查询字符串来传递参数。下面是关于Vue路由传参query的介绍： 1. 在路由路径中添加查询参数 在定义路由规则时，可以在路由路径中添加查询参数，例如： ``` const routes = [ { path: '/getdata', name: 'GetData', component: () => import('vs/getData.vue') } ] ``` 2. 通过router-link传递查询参数 可以通过router-link组件的to属性来传递查询参数，例如： ``` <router-link :to="{ name: 'GetData', query: { key1: 'value1', key2: 'value2' } }">Get Data</router-link> ``` 3. 在组件中获取查询参数 在组件中，可以通过$route对象的query属性来获取查询参数，例如： ``` export default { mounted() { console.log(this.$route.query.key1) console.log(this.$route.query.key2) } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值