A:router路由配置

export default new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home,
children:[
{path:'home1',component:Home1},
{path:'home2',component:Home2},
{path:'home3',component:Home3},
{path:'home4',component:Home4},
],
},{
path: '/detail',
name: 'detail',
component:Detail
},{
path:'/',redirect:'/home/home1'
}
],
linkActiveClass:'ac'
})

B.template内部

<li v-for="data in tuijiaList.playlists">
<router-link :to="{path:'/detail',query:{id:data.id}}" >
<span>{{data.playCount}}</span><i><img :src="data.coverImgUrl"></i>
<p>{{data.name}}</p>
</router-link>
</li>

C:在detail页面上怎么得到id 值? 
this.$route.query.id;

在vue中怎么动态变换router-link中to的值

比如有这么个router需要跳转

const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})

你的router-link可以这么写

<router-link :to="{ name: 'user', params: { userId: 123 }}">User
</router-link>

还可以用编程在代码里写,效果也一样:

router.push({ name: 'user', params: { userId: 123 }})

 
 
 
click 传值
productDet(inde) {
  this.$router.push({
    path: "/addsEdit",
    name: "addsEdit",
    params: {
      indexs: inde
    }
  });
},
接收
this.indexs= this.$route.params.indexs;
 
 
 

转自博客:https://www.cnblogs.com/xcdl/p/7411235.html

router-link动态赋值的更多相关文章

  1. Highcharts动态赋值学习

    最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...

  2. URL动态赋值

    url动态赋值: 指的是url中包含{selector},即花括号括起来的jQuery选择器,当提交该url时,框架会自动将selector对应元素的值替换到花括号所占区域. (感觉实现了一点类似el ...

  3. 使用 Attribute +反射 来对两个类之间动态赋值

    看同事使用的 一个ORM 框架 中 有这样一个功能  通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的  Dapper  所 ...

  4. Jquery为下拉列表动态赋值与取值,取索引

    接触前端也不久对jquery用的也只是皮毛,写过去感觉能复用的发出来,大家指点下 1.下拉列表动态赋值 function initddlYear() { var mydate = new Date() ...

  5. Oracle游标动态赋值

    1. oracle游标动态赋值的小例子 -- 实现1:动态给游标赋值 -- 实现2:游标用表的rowtype声明,但数据却只配置表一行的某些字段时,遍历游标时需fetch into到精确字段 CREA ...

  6. javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

    原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...

  7. C# 实体/集合差异比较,比较两个实体或集合值是否一样,将实体2的值动态赋值给实体1(名称一样的属性进行赋值)

    /// <summary> /// 实体差异比较器 /// </summary> /// <param name="source">源版本实体& ...

  8. jQuery Distpicker插件 省市区三级联动 动态赋值修改地址

    在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...

  9. 生成带有表格的word附件和动态赋值

    生成带有表格的word附件和动态赋值, 表格前后需要添加一个特殊的开始和结束的域,表格第一列 TableStart:AuditJdcttbzInfo 和表格的最后一列 TableEnd:AuditJd ...

  10. 生成word附件和word域动态赋值

    生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...

随机推荐

  1. IPsec分析/测试/

    一   局域网拓扑图 局域网环境搭建步骤: (升级最新版本 ,恢复出厂设置后) 1 两台网关wan口直连,分别接两台pc , 2 局域网网络测试,正常情况下PC1 和PC2 互通 ,测试通过在进行ip ...

  2. 【JZOJ6357】小ω的图(graph)

    description analysis 拆位从高位到低位贪心 对于当前位,如果把所有当前位为\(1\)的边塞入,\(1\)和\(n\)连通,则该位必须为\(1\) 这个是因为高位的\(1\)比所有低 ...

  3. Linux命令速查手册(第2版)学习

    第1章.需要了解的命令行相关事项 表1-1 如何在文件名字符中使用特殊字符 字符 建议 / 绝不使用.不能转义 \ 必须转义.避免使用 _ 绝不能作为文件或目录名的第一个字符 [] 必须转义.避免使用 ...

  4. javaScript 习题总结(持续更新)

    判定偶数 function collect_all_even(collection) { return collection.filter(item => item%2 == 0); } 两个集 ...

  5. 第十八篇:java操作Excel要处理和分辨的几个概念

    工具:org.apache.poiExcel格式:.xls(03,存储量小些):.xlsx(07以上) 首先明确这点:给你一个装满数据的Excel,并不能保证每行都有数据,每一行并不能保证每个单元格都 ...

  6. Visual Studio 2019安装教程

    一.下载 网址:https://visualstudio.microsoft.com/zh-hans/vs/ 下载后是一个.exe文件 二.安装 双击打开下载的.exe文件,进入文件的提取 提取完成后 ...

  7. docker上安装ActiveMQ

    1.查看是否已经存在镜像 docker images 2.搜索镜像 docker search activemq 3.拉取镜像 docker pull webcenter/activemq 4.构建容 ...

  8. TIB、TEB 信息

    https://en.wikipedia.org/wiki/Win32_Thread_Information_Block 这是重点 Position Length Windows Versions D ...

  9. Linux 下 Nand Flash 调用关系

    Nand Flash 设备添加时数据结构包含关系 struct mtd_partition        partition_info[] --> struct s3c2410_nand_set ...

  10. Caffe系列2——Windows10制作LMDB数据详细过程(手把手教你制作LMDB)

    Windows10制作LMDB详细教程 原创不易,转载请注明出处:https://www.cnblogs.com/xiaoboge/p/10678658.html 摘要: 当我们在使用Caffe做深度 ...