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. 小程序template怎样渲染页面的

    template模板渲染demo wxml页面 <view class="btmcon"> <text class="btmtitle"> ...

  2. thinkphp 标签库

    内置的模板引擎除了支持普通变量的输出之外,更强大的地方在于标签库功能. 标签库类似于Java的Struts中的JSP标签库,每一个标签库是一个独立的标签库文件,标签库中的每一个标签完成某个功能,采用X ...

  3. Docker系列(四):Docker容器互联

    基于Volume的互联 为什么需要Volume docker文件系统是分层的,下面的是全部是只读的,最上面的是可写层,容器中的进程如果修改了某个文件,比如修改了下层的某个文件,其实是在最顶层复制下层文 ...

  4. 线程池_ThreadPool

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...

  5. MDK,关于 STM32F4 配置失败, GPIO, USART 写入值没反应

    需要先将RCC->AHB1ENR寄存器的对应时钟打开! 下面做个测试: 配置GPIO实验 没有打开时钟使能,配置无反应: 打开时钟使能后,可以成功写入数据: 配置USART实验 RCC 未开启时 ...

  6. day 53 Django基础二之URL路由系统

    Django基础二之URL路由系统   本节目录 一 URL配置 二 正则表达式详解 三 分组命名匹配 四 命名URL(别名)和URL反向解析 五 命名空间模式 一 URL配置 Django 1.11 ...

  7. 初识OpenCV-Python - 008: 形态转换

    本节学习了图片的形态转换,即利用函数和图像的前景色和背景色去侵蚀或者扩张图像图形. import cv2import numpy as npfrom matplotlib import pyplot ...

  8. js 调用接口并传参

    注:需先引入 jquery.json-xx.min.js 1. 参数跟在url后面 var name = '王一'; var age = 18; $.ajax({ type : 'get', url ...

  9. JS规则 表达出你的想法(表达式) 通常包括常数和变量 var num2 = num1+6;

    表达出你的想法(表达式) 表达式与数学中的定义相似,表达式是指具有一定的值.用操作符把常数和变量连接起来的代数式.一个表达式可以包含常数或变量. 我们先看看下面的JavaScript语句: 生活中&q ...

  10. springboot中pageHelper插件 list设置不进去 为null

    分页pageHelper中list放不进去值  为null,可能的解决方案如下: 1. 注意代码顺序,PageHelper.startPage(pageNumber,pageSize)要放在查询Lis ...