A:router路由配置

 1 export default new Router({
2 routes: [
3 {
4 path: '/home',
5 name: 'Home',
6 component: Home,
7 children:[
8 {path:'home1',component:Home1},
9 {path:'home2',component:Home2},
10 {path:'home3',component:Home3},
11 {path:'home4',component:Home4},
12 ],
13 },{
14 path: '/detail',
15 name: 'detail',
16 component:Detail
17 },{
18 path:'/',redirect:'/home/home1'
19 }
20 ],
21 linkActiveClass:'ac'
22 })

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-router2.0 初学--动态赋值的更多相关文章

  1. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  2. vue关于img src动态赋值问题

    解决方法: 加个require()就可以了 <img :src="require('../assets/images/'+imgsrc+'.png')"/>

  3. vue 2.0 vue.set的使用方法

    这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...

  4. Highcharts动态赋值学习

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

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

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

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

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

  7. Vue 2.0基础语法:系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  8. 十八、泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器基础加强

    l 泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器 泛型 1 回顾泛型类 泛型类:具有一个或多个泛型变量的类被称之为泛型类. public class A<T> { ...

  9. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

随机推荐

  1. 收集的一些python基础教学博客

    =======python3学习链接======= Python 3 教程:http://www.runoob.com/python3/python3-tutorial.html 深入python3: ...

  2. [Dart] Flutter 上传文件

    /** * 请求响应数据 */ class MsgResponse { int code; // 状态代码,0 表示没有错误 Object data; // 数据内容,一般为字符串 String er ...

  3. OpenACC 《大规模并行处理器编程实战》教材讲解

    ▶ <大规模并行处理器编程实战>第15章,关于OpenACC 的部分,散点 ● OpenACC 中,主机存储器和设备存储器是分开处理的,程序员只要制定要传输的存储器对象即可,编译器会自动生 ...

  4. restful 分风格

    参考:  https://blog.csdn.net/b671900/article/details/24478283 https://blog.csdn.net/john548/article/de ...

  5. delphi RAD Studio新版本及路线图 及官方网站 官方 版本发布时间

    delphi  RAD Studio Berlin 10.1 主要是FireMonkey 移动开发的改动,VCL确实没有多大变化. http://docwiki.embarcadero.com/RAD ...

  6. J2SE 8的输入输出--序列化

    1. 普通序列化 implements Serializable 继承Serializable接口 class Employee implements Serializable { private S ...

  7. EXCEL 数组公式

    数组里的元素,同一行内的各元素用英文逗号“,”分开,用英文分号“;”将各行分开 3.单列数组与单行数组的计算 两个数组相加,查看结果是几行几列:在任意单元格输入公式“=A80:A83+B87:E87” ...

  8. background-image,background-repeat, background-position 实现点赞图片(一个图片的多次使用)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Spring MVC 自定义视图

    实现View import org.springframework.stereotype.Component; import org.springframework.web.servlet.View; ...

  10. 转载:canal数据库同步redis

    ref: http://blog.csdn.net/tb3039450/article/details/53928351