router-link动态赋值
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 }})
router-link动态赋值的更多相关文章
- Highcharts动态赋值学习
最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...
- URL动态赋值
url动态赋值: 指的是url中包含{selector},即花括号括起来的jQuery选择器,当提交该url时,框架会自动将selector对应元素的值替换到花括号所占区域. (感觉实现了一点类似el ...
- 使用 Attribute +反射 来对两个类之间动态赋值
看同事使用的 一个ORM 框架 中 有这样一个功能 通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的 Dapper 所 ...
- Jquery为下拉列表动态赋值与取值,取索引
接触前端也不久对jquery用的也只是皮毛,写过去感觉能复用的发出来,大家指点下 1.下拉列表动态赋值 function initddlYear() { var mydate = new Date() ...
- Oracle游标动态赋值
1. oracle游标动态赋值的小例子 -- 实现1:动态给游标赋值 -- 实现2:游标用表的rowtype声明,但数据却只配置表一行的某些字段时,遍历游标时需fetch into到精确字段 CREA ...
- javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表
原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...
- C# 实体/集合差异比较,比较两个实体或集合值是否一样,将实体2的值动态赋值给实体1(名称一样的属性进行赋值)
/// <summary> /// 实体差异比较器 /// </summary> /// <param name="source">源版本实体& ...
- jQuery Distpicker插件 省市区三级联动 动态赋值修改地址
在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...
- 生成带有表格的word附件和动态赋值
生成带有表格的word附件和动态赋值, 表格前后需要添加一个特殊的开始和结束的域,表格第一列 TableStart:AuditJdcttbzInfo 和表格的最后一列 TableEnd:AuditJd ...
- 生成word附件和word域动态赋值
生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...
随机推荐
- IPsec分析/测试/
一 局域网拓扑图 局域网环境搭建步骤: (升级最新版本 ,恢复出厂设置后) 1 两台网关wan口直连,分别接两台pc , 2 局域网网络测试,正常情况下PC1 和PC2 互通 ,测试通过在进行ip ...
- 【JZOJ6357】小ω的图(graph)
description analysis 拆位从高位到低位贪心 对于当前位,如果把所有当前位为\(1\)的边塞入,\(1\)和\(n\)连通,则该位必须为\(1\) 这个是因为高位的\(1\)比所有低 ...
- Linux命令速查手册(第2版)学习
第1章.需要了解的命令行相关事项 表1-1 如何在文件名字符中使用特殊字符 字符 建议 / 绝不使用.不能转义 \ 必须转义.避免使用 _ 绝不能作为文件或目录名的第一个字符 [] 必须转义.避免使用 ...
- javaScript 习题总结(持续更新)
判定偶数 function collect_all_even(collection) { return collection.filter(item => item%2 == 0); } 两个集 ...
- 第十八篇:java操作Excel要处理和分辨的几个概念
工具:org.apache.poiExcel格式:.xls(03,存储量小些):.xlsx(07以上) 首先明确这点:给你一个装满数据的Excel,并不能保证每行都有数据,每一行并不能保证每个单元格都 ...
- Visual Studio 2019安装教程
一.下载 网址:https://visualstudio.microsoft.com/zh-hans/vs/ 下载后是一个.exe文件 二.安装 双击打开下载的.exe文件,进入文件的提取 提取完成后 ...
- docker上安装ActiveMQ
1.查看是否已经存在镜像 docker images 2.搜索镜像 docker search activemq 3.拉取镜像 docker pull webcenter/activemq 4.构建容 ...
- TIB、TEB 信息
https://en.wikipedia.org/wiki/Win32_Thread_Information_Block 这是重点 Position Length Windows Versions D ...
- Linux 下 Nand Flash 调用关系
Nand Flash 设备添加时数据结构包含关系 struct mtd_partition partition_info[] --> struct s3c2410_nand_set ...
- Caffe系列2——Windows10制作LMDB数据详细过程(手把手教你制作LMDB)
Windows10制作LMDB详细教程 原创不易,转载请注明出处:https://www.cnblogs.com/xiaoboge/p/10678658.html 摘要: 当我们在使用Caffe做深度 ...