工作74:vue带参数跳转其他页面

1.准备好两个vue文件

panda.vue
travel.vue
在这里插入图片描述

2.写index.js配置文件

在这里插入图片描述
在这里插入图片描述

import travel from '@/components/travel'
  • 1
    {path: '/travel/:id',name: '测试页面',component: travel}

3.编写跳转前的页面

在这里插入图片描述
在这里插入图片描述
这是一个点击事件

gettravel(id) {this.$router.push({path: '/travel/' + id,})}},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这里触发事件,并且传递参数


<span @click="gettravel(item.spotsid)"><h1>点击tiaoz</h1></span>
  • 1
  • 2
  • 3
  • 4

4,编写跳转后的页面接收参数

<div>{{this.$route.params.id}}</div>

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

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

相关文章

洛谷 3381 【模板】最小费用最大流

https://www.luogu.org/problem/show?pid3381 题目描述 如题&#xff0c;给出一个网络图&#xff0c;以及其源点和汇点&#xff0c;每条边已知其最大流量和单位流量费用&#xff0c;求出其网络最大流和在最大流情况下的最小费用。 输入输出格式 输入格式&#xff1a; 第一行包…

自己定义ViewGroup控件(一)-----gt;流式布局进阶(一)

main.xml <?xml version"1.0" encoding"utf-8"?> <com.example.SimpleLayout.MyLinLayout xmlns:android"http://schemas.android.com/apk/res/android" xmlns:tools"http://schemas.android.com/tools" android:layout_wi…

【C++11/17】std::map高效插入

我们在使用stl的映射容器std::map时&#xff0c;经常需要向容器中插入数据。由于map的元素key值是唯一的&#xff0c;我们经常遇到这样的场景&#xff1a; 向map中插入元素时&#xff0c;指定的key已经存在则直接更新&#xff1b;指定的key不存在&#xff0c;然后才做插入操作…

oracle选择外键列,Oracle外键列上是否需要索引?

外键列上缺少索引会带来两个问题&#xff0c;限制并发性、影响性能。而这两个问题中的任意一个都可能会造成严重性能问题。 无论是Or外键列上缺少索引会带来两个问题&#xff0c;限制并发性、影响性能。而这两个问题中的任意一个都可能会造成严重性能问题。无论是Oracle的官方文…

linux命令行sip电话,基于Linux和MiniGUI的SIP电话终端设计

0 引言随着VoIP的迅猛发展&#xff0c;越来越多的个人用户正在使用软件电话、IP电话通过VoIP系统拨打国内和国际长途&#xff0c;IP电话的需求量越来越大&#xff0c;同时&#xff0c;人们对IP电话的要求也越来越高&#xff0c;例如要求IP电话体积小、方便携带、功耗低、待机时…

Maven--反应堆(Reactor)

在一个多模块的 Maven 项目中&#xff0c;反应堆是指所有模块组成的一个构建结构。对于单模块的项目&#xff0c;反应堆就是该模块本身。但对于多模块项目来说&#xff0c;反应堆就包含了各模块之间继承与依赖的关系&#xff0c;从而能够自动计算出合理的模块构建顺序。 模块间…

工作87:element-ui el-table sortable属性 参数详解

表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 上代码 <el-table:data"tableData"style"width: 100%"<!-- 数据由后台进行排序时sortable"custom",需要监听排序点击事件,会返回当前的prop和order -->sort-change"c…

工作88:vue实现当前页面刷新

想必大家在刨坑vue的时候也遇到过下面情形&#xff1a;比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种&#xff1a; 如果希望点击确定的时候&#xff0c;Dialog 对话框关闭的时候&#xff0c;当前http://localhost:9530/#/supplier/supplierAll页面可…