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. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  2. filter vs servlet

    主要从如下四个方面介绍他们之间的区别:                 1.概念.                 2.生命周期.                 3.职责. 4.执行过程. 一.概念 ...

  3. openStack 租户控制台修改虚拟机账户密码

    - cloud-init方式 该种方式需要虚拟机镜像安装cloud-init,将重置密码脚本注入到虚拟机中.nova boot –image=image-id –nic net-id=net-id – ...

  4. OpenACC 书上的范例代码(Jacobi 迭代),part 1

    ▶ 使用Jacobi 迭代求泊松方程的数值解 ● 原始串行版本,运行时间 2272 ms #include <stdio.h> #include <stdlib.h> #inc ...

  5. spring boot 整合 (全)

    参考: https://github.com/spring-projects/spring-boot/tree/master/spring-boot-samples

  6. 使用AngularJS处理单选框和复选框的简单方法

    在复选框中,可以绑定ng-model给false或者true值,即可选中或清除选中状态 如下图 而在单选框里就相对复杂一点,单选框要选中一个,就要给相同的name属性,然后绑定相同的ng-model, ...

  7. rem 响应 js函数

    size();window.onresize = function(){ size();}function size(){ var htnl_o=document.getElementsByTagNa ...

  8. jquery 获取和设置Select选项常用方法总结

    1.获取select 选中的 text:$("#cusChildTypeId").find("option:selected").text();$(" ...

  9. How to Pronounce the I in ING

    How to Pronounce the I in ING Share Tweet Share Tagged With: ING Verbs The I in ING is the IH as in ...

  10. 趣味编程:24点(Haskell版)

    24 game/Solve import Data.List import Data.Ratio import Control.Monad data Expr = Constant Rational ...