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比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
随机推荐
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- filter vs servlet
主要从如下四个方面介绍他们之间的区别: 1.概念. 2.生命周期. 3.职责. 4.执行过程. 一.概念 ...
- openStack 租户控制台修改虚拟机账户密码
- cloud-init方式 该种方式需要虚拟机镜像安装cloud-init,将重置密码脚本注入到虚拟机中.nova boot –image=image-id –nic net-id=net-id – ...
- OpenACC 书上的范例代码(Jacobi 迭代),part 1
▶ 使用Jacobi 迭代求泊松方程的数值解 ● 原始串行版本,运行时间 2272 ms #include <stdio.h> #include <stdlib.h> #inc ...
- spring boot 整合 (全)
参考: https://github.com/spring-projects/spring-boot/tree/master/spring-boot-samples
- 使用AngularJS处理单选框和复选框的简单方法
在复选框中,可以绑定ng-model给false或者true值,即可选中或清除选中状态 如下图 而在单选框里就相对复杂一点,单选框要选中一个,就要给相同的name属性,然后绑定相同的ng-model, ...
- rem 响应 js函数
size();window.onresize = function(){ size();}function size(){ var htnl_o=document.getElementsByTagNa ...
- jquery 获取和设置Select选项常用方法总结
1.获取select 选中的 text:$("#cusChildTypeId").find("option:selected").text();$(" ...
- 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 ...
- 趣味编程:24点(Haskell版)
24 game/Solve import Data.List import Data.Ratio import Control.Monad data Expr = Constant Rational ...