经常碰到这类需求,从后台获取数据后再前程连接,参数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. TCP/IP学习20180626-数据链路层

    数据链路层有三个目的: 为IP模块发送和 接收IP数据报. 为ARP模块发送ARP请求和接收ARP应答. 为RARP发送RARP请 求和接收RARP应答 ip大家都听说过. ARP叫做地址解析协议,是 ...

  2. 生成器&迭代器,模块

    列表生成式 将列表data=[1,2,3]里的元素都乘2 方法一 data=[1,2,3] for index,i in enumerate(data): data[index] *=2 print( ...

  3. 其他类想使用unittest的断言方法,就import unittest的框架,继承他,使用他里面的方法

    在断言层 也可以同样用这个方法

  4. 服务网关zuul之五:熔断

    路由熔断 当我们的后端服务出现异常的时候,我们不希望将异常抛出给最外层,期望服务可以自动进行一降级.Zuul给我们提供了这样的支持.当某个服务出现异常时,直接返回我们预设的信息. 如果没有配置fall ...

  5. ROS-MikroTik-RouterOS-培训认证各种证书

    官方原文: https://mikrotik.com/training/about MikroTik certified training programs MTCNA - MikroTik Cert ...

  6. android-sdk和api版本

    Platform Version API Level VERSION_CODE Notes Android 8.1  27    O_MR1 平台亮点Android 8.0  26  O 平台亮点An ...

  7. win下使用git-bash工具进行ssh免密登录服务器

    1.ssh-keygen.exe 生成公钥私钥(.pub) 2.ssh-agent.exe bash  指定工具 3.ssh-add.exe   ****   添加私钥 OK

  8. Centos7修改系统时区timezone

    第一步:查询服务器时间 [root@localhost ~]# timedatectl Local time: Sat 2018-03-31 01:11:46 UTC Universal time: ...

  9. CRM 2016 执行IFrame 子页面中函数

    CRM代码: var iframe = Xrm.Page.getControl("IFRAME_xxx").getObject(); iframe.contentWindow.Re ...

  10. 可变卷积Deforable ConvNet 迁移训练自己的数据集 MXNet框架 GPU版

    [引言] 最近在用可变卷积的rfcn 模型迁移训练自己的数据集, MSRA官方使用的MXNet框架 环境搭建及配置:http://www.cnblogs.com/andre-ma/p/8867031. ...