vue-router2.0 初学--动态赋值
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 初学--动态赋值的更多相关文章
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- vue关于img src动态赋值问题
解决方法: 加个require()就可以了 <img :src="require('../assets/images/'+imgsrc+'.png')"/>
- vue 2.0 vue.set的使用方法
这里我定义了一个列表数据,我将通过三个不同的按钮来控制列表数据. 首先在列表中动态新增一条数据: <!DOCTYPE html><html><head lang=&quo ...
- Highcharts动态赋值学习
最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...
- Jquery为下拉列表动态赋值与取值,取索引
接触前端也不久对jquery用的也只是皮毛,写过去感觉能复用的发出来,大家指点下 1.下拉列表动态赋值 function initddlYear() { var mydate = new Date() ...
- javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表
原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- 十八、泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器基础加强
l 泛型 l 注解 l Servlet3.0 l 动态代理 l 类加载器 泛型 1 回顾泛型类 泛型类:具有一个或多个泛型变量的类被称之为泛型类. public class A<T> { ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
随机推荐
- JavaScript语句和异常
知识内容: 1.条件语句(分支语句) 2.循环语句 3.with语句 4.异常处理 5.本节练习 参考资料:<JavaScript高级程序设计> 1.条件语句 JavaScript中的条件 ...
- python之Web服务器案例
HTTP协议简介 1. 使用谷歌/火狐浏览器分析 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来.而浏览器和服务器之间的传输协议是HTTP,所以: ...
- jap _spring _maven
pom.xm <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3 ...
- jap 事务总结
参考: JPA事务总结 2010年4月13日 - 从表11-2中可以看出,对于不同的EntityManager类型与所运行的环境,所支持的事务类型是不一样的. 其中两种情况下最为简单,一种是容器托管的 ...
- leetcode965
public class Solution { List<int> list = new List<int>(); private void postTree(TreeNode ...
- http get 方式参数的长度限制<转>
http get 方式参数的长度限制 这个问题一直以来似乎是被N多人误解,其实Http Get方法提交的数据大小长度并没有限制,而是IE浏览器本身对地址栏URL长度有最大长度限制:2048个字符. 当 ...
- WDA-BOPF业务对象处理框架
SAP中的BOPF(Business Object Processing Framework) 正文 希望简化你的业务应用开发过程?业务对象处理框架(Business Object Processin ...
- ios 缩放动画
CABasicAnimation *buttonAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; ...
- eclipse 注释字体不一致的问题
eclipse中 1.解决注释的文字大小不一的情况 2.想让注释和代码大小不一样 3.win10系统下,设置Text Font时找不到Courier New字体 1.解决注释的文字大小不一的情况 打开 ...
- 了解innodb_support_xa(分布式事务)
innodb_support_xa可以开关InnoDB的xa两段式事务提交.默认情况下,innodb_support_xa=true,支持xa两段式事务提交.此时MySQL首先要求innodb pre ...