vue-router 动态导航 router-link :to属性
经常碰到这类需求,从后台获取数据后再前程连接,参数id动态获取
<el-row v-for="item in Travels">
<el-col :span="24">
<el-card :body-style="{ padding: '0px' , width : '100%'}">
<router-link :to="{path:'/travel/detail/'+ item.id}"><img :src="item.img" class="image"></router-link>
<div style="padding: 14px;">
<span class="description">{{item.description}}</span>
<div class="bottom clearfix">
<time class="time">{{item.time}}</time>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
:to="{path:'/travel/detail/'+ item.id}" 利用:to 属性可以动态分配
mounted(){
this.GetTravel(this.$route.params.days);
}
使用
this.$route.params.days 可以获取当前路由参数
{{$route.params.id}} 可以在模板中获取当前路由参数
vue-router 动态导航 router-link :to属性的更多相关文章
- vue router动态路由
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
- 【11】vue router 之导航钩子
导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue04——vue自定义事件、Router、Vue-cli、发布上线
一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...
- vue工程化与路由router
一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- vue中$route 和$router的区别
在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的区别傻傻的分 ...
- vue Element动态设置el-menu导航当前选中项
1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- vue & this.$route & this.$router
vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...
随机推荐
- 分布式消息队列RocketMQ--事务消息--解决分布式事务
说到分布式事务,就会谈到那个经典的”账号转账”问题:2个账号,分布处于2个不同的DB,或者说2个不同的子系统里面,A要扣钱,B要加钱,如何保证原子性? 一般的思路都是通过消息中间件来实现“最终一致性” ...
- Ubuntu 14.10 下Hadoop FTP文件上传配置
最近老板提出一个需求,要用Hadoop机群管理生物数据,并且生物数据很多动辄几十G,几百G,所以需要将这些数据传到HDFS中,在此之前搭建了HUE用来图形化截面管理HDFS数据,但是有个问题,上面使用 ...
- .NET数据请求序列化
这是一个.ner框架中经常用到的数据映射类,此类主要承接业务应用做数据的增删查改操作.通过序列化将查询数据映射为需要的类. 由于经常会用到,这里收藏一下. data用作SQL数据库链接操作: Repo ...
- 使用jquery.mCustomScrollbar自定义滚动条(4)live使用,向未来元素添加滚动条,不实用,了解一下
.div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...
- requests 请求几个接口 出现’您的账户在其它设备使用过,为保障安全,需重新登入才能在本设备使用‘
因为接口和接口直接有个字段是关联的 在登陆请求后,后台响应了个token,下面的请求 ,请求头要带上这个token 才认为是登陆后 的操作
- NPF or NPCAP service is not installed
"NPF or NPCAP service is not installed" "could not start local server process:GNS3&qu ...
- [UE4]保存游戏数据
新建一个继承自“SaveGame”的蓝图.
- Java关键字final、static使用总结(转)
原文链接:Java关键字final, static一些要点 1. final final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被 ...
- (转) C#之VS自带RDLC报表学习
原文地址:http://blog.csdn.net/hk_5788/article/details/49846905 原文工具VS2010,测试版本工具VS2013 报表是这样设计的: 看看结果: ...
- 微信小程序--swiper组件
<view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...