vue路由传参的三种基本方式

一:

      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,})

方案一,需要对应路由配置如下:

   {path: '/describe/:id',name: 'Describe',component: Describe}

很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

二:

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

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

对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

   {path: '/describe',name: 'Describe',component: Describe}

子组件中: 这样来获取参数

this.$route.params.id

三:

父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?

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

对应路由配置:

   {path: '/describe',name: 'Describe',component: Describe}

对应子组件: 这样来获取参数

this.$route.query.id

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[css] flex布局的缺点有哪些?(除兼容性外)

[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现)个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端…

vue router-link 添加点击事件

在vue学习中遇到给router-link 标签添加事件click 、mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡&#xff0c; 鼠标移上去出现删除标签&#xff0c;移除标签消失的效果 原代码&#xff1a; <router-link v-for"(item, index) in pageMenuList"…

Spring Boot实践——基础和常用配置

借鉴&#xff1a;https://blog.csdn.net/j903829182/article/details/74906948 一、Spring Boot 启动注解说明 SpringBootApplication开启了Spring的组件扫描和Spring Boot的自动配置功能。实际上&#xff0c; SpringBootApplication将三个有用的注解组合在了一起。 Spring的Co…

[css] 你知道什么是面向对象的css(oocss)吗?有没有实践过?

[css] 你知道什么是面向对象的css&#xff08;oocss&#xff09;吗&#xff1f;有没有实践过&#xff1f; oocss(Object Oriented CSS)不是一种技术也不是一种语言&#xff0c;它是一种css的书写方法&#xff0c;其核心是用最简单的方式编写最整洁的css代码&#xff0c;使代码…

vue 实现页面静态化

实现思路 使用 this.$router.push(location) 来修改 url&#xff0c;完成页面路由跳转使用params来隐式传递url的参数&#xff0c;它类似post&#xff0c;url看不出&#xff0c;使用query来传递参数的话&#xff0c;类似get&#xff0c;url一定会被格式化为http://www.xxx.com…

BZOJ1226 SDOI2009学校食堂(状压dp)

由于Bi<7&#xff0c;考虑状压。 如果考虑前i个位置的话&#xff0c;状态里需要压入前7个人后7个人&#xff0c;显然是跑不动的。 那么改成考虑前i个人。于是设f[i][j][k]表示前i个人都已吃完饭&#xff0c;i1后面7个人的吃饭状态为j&#xff0c;最后一个吃饭的人是k的答案。…

vue实现监听滚动条

// 组件挂载后添加监听事件 mounted () {window.addEventListener(scroll, this.handleScroll) }, methods: {// 我这里监听的是侧边的滚动条handleScroll: () > {// 滚动时&#xff0c;距离顶部的距离var scrollTop document.documentElement.scrollTop || document.body.…

[css] 什么是hack?css的hack有哪些?

[css] 什么是hack&#xff1f;css的hack有哪些&#xff1f; 一、总结 1、CSS hack&#xff1a;由于不同厂商的浏览器&#xff0c;比如Internet Explorer,Safari,Mozilla Firefox,Chrome等&#xff0c;或者是同一厂商的浏览器的不同版本&#xff0c;如IE6和IE7&#xff0c;对CS…

Element组件 Drawer 抽屉的关闭问题

场景 我使用的Drawer 抽屉是从上往下开的效果&#xff0c;点击搜索图标&#xff0c;从上往下开没问题&#xff0c;输入关键字搜索&#xff0c;搜索出来的列表放置于搜索栏下面&#xff0c;所以使用了一个子组件 问题就来了 搜出来的列表item&#xff0c;点击任意一条&#x…

First Steps with TensorFlow代码解析

注&#xff1a;本文的内容基本上都摘自tensorflow的官网&#xff0c;只不过官网中的这部分内容在国内访问不了&#xff0c;所以我只是当做一个知识的搬运工&#xff0c;同时梳理了一遍&#xff0c;方便大家查看。本文相关内容地址如下&#xff1a; https://developers.google.c…

[css] 说说你对相对定位、绝对定位、固定定位的理解

[css] 说说你对相对定位、绝对定位、固定定位的理解 position 属性指定了元素的定位类型。position 属性的五个值&#xff1a;static&#xff08;默认值&#xff09; relative&#xff08;相对定位&#xff09; fixed&#xff08;固定定位&#xff09; absolute&#xff08;绝…

宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的&#xff0c;因为我做一切开发都想要希望要从一个标准的构建去编码 所以&#xff0c;我的项目在node下运行&#xff0c;开发&#xff0c;调试是没有一点问题的&#xff0c;npm run build也是完全OK的&#xff0c;vue路由是history模式 把build出来的d…

[css] css中的选择器、属性、属性值区分大小写吗?

[css] css中的选择器、属性、属性值区分大小写吗&#xff1f; 选择器和属性区分大小写&#xff0c;属性值如果是颜色可以不区分大小写吧个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌…

vscode设置中文,设置中文不成功问题

刚安装好的vscode界面显示英文&#xff0c;如何设置中文呢&#xff1f; 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文&#xff0c;在网上找了参考了&#xff0c;以下教程真实测试有效&#xff01; 首先&#xff1a; 下载插件&#xff1a;Chines…

移动端阻止body左右偏移

如果一直找不到你的CSS问题&#xff0c;就用下面的CSS解决吧 html,body{overflow-x: hidden;} 原生JS function bodyScroll(){e.preventDefault(); } document.addEventListener(touchmove, bodyScroll, false); //阻止 document.removeEventListener(touchmove, bodyScroll,…

[css] img标签是行内元素,为什么却能设置宽高

[css] img标签是行内元素&#xff0c;为什么却能设置宽高 原来CSS中还有一个概念&#xff1a;可替换元素MDN上是这么解释的&#xff1a;在 CSS 中&#xff0c;可替换元素&#xff08;replaced element&#xff09;的展现效果不是由 CSS 来控制的。这些元素是一种外部对象&…

网页Request Headers请求头和Response Headers响应头

Request Headers Accept:告诉服务器&#xff0c;客户机支持的数据类型 Accept-Encoding:告诉服务器&#xff0c;客户机支持的数据压缩格式 Cache-Control&#xff1a;缓存控制&#xff0c;服务器通过控制浏览器要不要缓存数据 Connection:处理完这次请求&#xff0c;是断开…

springboot+jpa+mysql+redis+swagger整合步骤

springbootjpaMySQLswagger框架搭建好之上再整合redis&#xff1a; 在电脑上先安装redis&#xff1a; 一、在pom.xml中引入redis 二、在application.yml里配置redis&#xff0c;单独说明&#xff1a;redis刚一开始安装好是没有设置密码的。否则&#xff0c;会报connection错误。…

[css] 如何禁止长按保存或复制图像?

[css] 如何禁止长按保存或复制图像&#xff1f; img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目…

python3下使用requests实现模拟用户登录 —— 基础篇(马蜂窝)

我是从这篇博客中&#xff08;https://blog.csdn.net/zwq912318834/article/details/79571110&#xff09;了解的一点基础东西&#xff0c;代码都是从这篇博客里面的源代码直接复制过去测试和学习的。 遇到的问题&#xff1a; 1、返回状态码&#xff1a;502——百度得知这是一…