父组件中的点击跳转:

     <ul class="insurance-entry clearfloat">
<li v-link="{name:'productlist',params:{id:1}}">1</li>
<li v-link="{name:'productlist',params:{id:2}}">2</li>
<li v-link="{name:'productlist',params:{id:3}}">3</li>
<li v-link="{name:'productlist',params:{id:4}}">4</li>
<li v-link="{name:'productlist',params:{id:5}}">5</li>
</ul>

在路由中定义子组件的时候

'/index/productlist/:id':{
//产品列表
name : 'productlist',
component: function (resolve) {
require(['./vue/productlist.vue'],resolve)
}
},

这里一定声明加id('/:id')。

这里的params就是子组件的id可以算作一个参数,在子组件中:

        route : {
data (transition){
this.articleId = transition.to.params.id;
}
},

这里就获取了params.id,但是这里用到了vuex,正常传参还没搞明白。。。

vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容的更多相关文章

  1. zTree中父节点禁用,子节点可以用

    参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父节点禁用,子节点可以用 axios.get('/base/unit/unittree ...

  2. vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

    在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...

  3. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  4. 8、vue路由跳转 params与query 路由传参

    params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...

  5. Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

  6. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

  7. js 使某个页面不允许在子iframe中打开的解决办法

    在页面中添加如下js代码<script> if (window.parent !== window.self) { window.parent.location.reload(); }&l ...

  8. pom父工程dependencyManagement中的jar包在子工程中不写版本号无法引入的问题

    1.遇到的问题:  本人用的idea,然后在导入别人的项目的时候,pom文件中没有报错了,但是在maven栏目中jar包却一直报红,是因为我没写版本的原因吗?不对呀,我的父工程下已经写了springb ...

  9. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

随机推荐

  1. XML代码生成器——XMLFACTORY 简介(二)

    XML代码生成器——XMLFACTORY 简介(二)      因为春节和项目上线的原因,离写上一篇文章的时间已经好久了. 不知道是事情太多了,还是自已效率太低了.总之是时间不够用. 哎,苦逼的程序员 ...

  2. 1.2 ASSEMBLY LANGUAGE

    People are much happier moving up the ladder,socially or even technically.So our profession has move ...

  3. XenServer安全重启xapi的方法

    XenServer安全重启xapi的方法 2012-11-29 12:58:07|  分类: 虚拟化-XenServer|字号 订阅 平常我们很常用到重启xapi命令,在这介绍下xapi: XAPI( ...

  4. day26_网络编程第一天

    1.网络通信三要素(掌握) IP      端口号      协议(UPD&TCP) 2.UDP协议与TCP协议各自特点(掌握) UDP 1.不需要建立连接:     2.有数据大小限制,每个 ...

  5. 学android: android-studio从main开始

    android-studio 创建hello world很容易,一路next创建blank activity,再接好手机或者avd(andorid virtual device)就好了.  但是对于我 ...

  6. LintCode StrStr

    1. 讨论目标字符串若为空, 则返回-1: 资源字符串若为空, 则返回-1. 2.讨论目标字符串个数为零, 则返回0: 资源字符串个数为零, 则返回-1. 3. 插入旗帜来使第二循环的结束为有条件地返 ...

  7. SVN更新报错

    将服务器SVN文件更新到本地是出现下图错误 报错中已经提示可以通过clean up来清理,若直接执行release lock,则不会解决问题. 原因:本地的项目中存在过期的工作副本 解决办法:选择该文 ...

  8. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  9. call指令的一个细节

    执行下面这个程序之后,ax的值是多少? assume cs:code code segment start: call s inc ax s: pop ax mov ax, 4c00h int 21h ...

  10. const指针

    const指针这个问题,复习了好多次,每次看书的时候明白,但是过了一段时间之后没用,总会再次被搞糊涂. 那么今天就把这个问题先用代码实现,把自己理解的写下来.代码在下面: ; ; const int* ...