父组件中的点击跳转:

     <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. 视音频技术作业一:比较CCD与CMOS摄像的区别

    作业详解: CCD与CMOS简介: CCD: CCD是Charge Coupled Device(电荷耦合器件)的缩写,它是一种半导体成像器件,因而具有灵敏度高.抗强光.畸变小.体积小.寿命长.抗震动 ...

  2. C语言内存分区

    在C/C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区.     栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变 ...

  3. Hql 中 dao 层 以及daoimpl 层的代码,让mvc 模式更直观简洁

    1.BaseDao接口: //使用BaseDao<T> 泛型 ,在service中注入的时候,只需要将T换为对应的bean即可 public interface BaseDao<T& ...

  4. 上下文管理、线程池、redis订阅和发布

    一:上下文管理: 对于一些对象在使用之后,需要关闭操作的.比如说:socket.mysql数据库连接.文件句柄等. 都可以用上下文来管理. 语法结构: Typical usage: @contextm ...

  5. c51

    ORG 0000HMOV R7,#08HMOV 83H,#01HMOV R4,#00HAA1:CLR P3.6 CLR P3.4 SETB P3.6 DJNZ R7,AA1AA2:JB P3.0,AA ...

  6. ulua 路径小记 以及 lua require 机制整理

    ulua 路径小记 在学习ulua时,require模块的根路径可以为项目的Lua文件夹或者ToLua文件夹(Editor下),但是在package.path和package.cpath中并没有看到当 ...

  7. dotproject 2.1.8 甘特图中文乱码解决

    1.安装中文语言包 下载地址为http://www.dotproject.net/dpDownloads/Language_Packs/Chinese_Simplified_(GBK)/dotproj ...

  8. TYVJ 4354 多重背包二进制优化

    直接放代码了 #include <cstdio> #include <cstring> #include <algorithm> using namespace s ...

  9. Longest Increasing Subsequence

    很久不写算法了== 写个东西练练手 最长上升子序列 输入n,然后是数组a[ ]的n个元素 输出最长上升子序列的长度 一.最简单的方法复杂度O(n * n) DP[ i ] 是以a[ i ] 为结尾的最 ...

  10. 通过js的console优雅的将php调试信息输出

    function consoleLog($val){ $debug = debug_backtrace(); unset($debug[0]['args']); echo '<script> ...