vue-router2.0 组件之间传参及获取动态参数的方法

1.标签

<li v-for=" el in hotLins" >
  <router-link :to="{path:'details',query: {id:el.tog_line_id}}">
    <img :src="el.image_list[0]">
    <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
    <p>{{el.address}}</p>
  </router-link>
</li>

2.在组件中，需要传动态参数时，可以如上例子

<router-link :to="{path:'details',query: {id:el.tog_line_id}}">

3.query中的参数id就是要传的参数，在组件中获取的方法为：

created: function() {
  var id = this.$route.query.id;
  this.getData(id);
 },

4.如上述，this.$route.query.id就可以获取该参数，也可以通过，this.$root.id = id;传给父组件，父组件中通过

　// 根组件构造器
  var vm = Vue.extend({
   router: router,
   data: function() {
    return {
     id: '11484' //城会玩明细id
    }
   }
  });

5.定义data中的id，然后子组件中用props传递参数

props: {
    id: {
     type: String,
     required: true
    }
   },

6.router-view中，传递该参数：

<router-view :id="id" :order-info="orderInfo">
</router-view>

注意orderInfo时，在这边用的是:order-info。

以上这篇vue-router2.0 组件之间传参及获取动态参数的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router实现组件间的跳转（参数传递）

    通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &

  • Vue系列：通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • vue2 router 动态传参,多个参数的实例

    这个是用vue-cli生成的项目下使用 比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中 处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo

  • vue-router2.0 组件之间传参及获取动态参数的方法

    1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.addre

  • Vue.js父与子组件之间传参示例

    例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中. App.vue中 <component-a msgfromfa=&q

  • .NET调用控制台下生成的exe文件,传参及获取返回参数的思路及代码

    最近客户要求把一个树型目录导出成文件夹套文件夹的结构,并提供下载功能,刚开始感觉功能比较容易实现就在最短的时间把基本功能搞定,当发布到服务器上之后发现直接在本应用程序中导出目录(下带ntko文档及附件)再进行压缩,程序直接卡死了!后来就想到了要做一window服务,只是客户给的时间太短,没办法先写一控制台程序生成一个exe文件,然后再调用这个exe文件,这样就可以缓解本程序压力了! 下面写一个测试项目 在调用exe端传过去一个要压缩的文件夹的路径,然后在控制台下获取该路径进行压缩,压缩完成之后返

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

  • vue router2.0二级路由的简单使用

    本文实例为大家分享了vue router2.0二级路由的具体代码,供大家参考,具体内容如下 1.app.vue中 <template> <div id="app"> <router-view></router-view> </div> </template> 2.router中index.js(路由的路径配置) import Vue from 'vue' import Router from 'vue-router

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    本文实例讲述了vue实现父子组件之间的通信以及兄弟组件的通信功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue父子组件通信.兄弟组件通信</title> <style> *{ margin: 0; padding: 0; l

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用

  • 微信小程序 页面之间传参实例详解

    微信小程序 页面之间传参实例详解

    微信小程序 传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh

随机推荐