经常碰到这类需求,从后台获取数据后再前程连接,参数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属性的更多相关文章

  1. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  2. 【11】vue router 之导航钩子

    导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...

  3. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  4. Vue04——vue自定义事件、Router、Vue-cli、发布上线

    一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...

  5. vue工程化与路由router

    一.介绍     vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...

  6. 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 ...

  7. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  8. vue Element动态设置el-menu导航当前选中项

    1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...

  9. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  10. vue & this.$route & this.$router

    vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...

随机推荐

  1. 分布式消息队列RocketMQ--事务消息--解决分布式事务

    说到分布式事务,就会谈到那个经典的”账号转账”问题:2个账号,分布处于2个不同的DB,或者说2个不同的子系统里面,A要扣钱,B要加钱,如何保证原子性? 一般的思路都是通过消息中间件来实现“最终一致性” ...

  2. Ubuntu 14.10 下Hadoop FTP文件上传配置

    最近老板提出一个需求,要用Hadoop机群管理生物数据,并且生物数据很多动辄几十G,几百G,所以需要将这些数据传到HDFS中,在此之前搭建了HUE用来图形化截面管理HDFS数据,但是有个问题,上面使用 ...

  3. .NET数据请求序列化

    这是一个.ner框架中经常用到的数据映射类,此类主要承接业务应用做数据的增删查改操作.通过序列化将查询数据映射为需要的类. 由于经常会用到,这里收藏一下. data用作SQL数据库链接操作: Repo ...

  4. 使用jquery.mCustomScrollbar自定义滚动条(4)live使用,向未来元素添加滚动条,不实用,了解一下

    .div_box元素是本来没有的,在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面,参数live:on; 点击按钮的时候,进行con ...

  5. requests 请求几个接口 出现’您的账户在其它设备使用过,为保障安全,需重新登入才能在本设备使用‘

    因为接口和接口直接有个字段是关联的 在登陆请求后,后台响应了个token,下面的请求 ,请求头要带上这个token 才认为是登陆后 的操作

  6. NPF or NPCAP service is not installed

    "NPF or NPCAP service is not installed" "could not start local server process:GNS3&qu ...

  7. [UE4]保存游戏数据

    新建一个继承自“SaveGame”的蓝图.

  8. Java关键字final、static使用总结(转)

    原文链接:Java关键字final, static一些要点 1. final   final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被 ...

  9. (转) C#之VS自带RDLC报表学习

    原文地址:http://blog.csdn.net/hk_5788/article/details/49846905  原文工具VS2010,测试版本工具VS2013 报表是这样设计的: 看看结果: ...

  10. 微信小程序--swiper组件

    <view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...