经常碰到这类需求,从后台获取数据后再前程连接,参数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. SolrServer SolrRequest

    SolrServer实现类 HttpSolrServer HttpSolrServer uses the Apache Commons HTTPClient to connect to solr. H ...

  2. C#、AE开发入门之打开TIFF文件并显示

    继上篇文章,本次打开TIFF文件,附上源码及其注释 private void button2_Click(object sender, EventArgs e) { axMapControl1.Cle ...

  3. 【ZZ】号称“开发者神器”的GitHub,到底该怎么用?

    号称“开发者神器”的GitHub,到底该怎么用? https://mp.weixin.qq.com/s/zpKOBMKWckY05Mv_B28RgQ A developer’s introductio ...

  4. Centos7.2/7.3集群安装Kubernetes 1.8.4 + Dashboard(转)

    原文https://www.cnblogs.com/burningTheStar/p/7865998.html 1.环境配置 结点数量:3 结点系统:CentOS 7.2 / 7.3 2.效果展示 3 ...

  5. Linux下的文件操作——基于文件描述符的文件操作(1)

    概要: 打开.创建和关闭文件 读写文件 文件定位 获取文件信息 打开.创建和关闭文件 函数原型: #include <sys/types.h> //头文件 #include <sys ...

  6. 详解http和https的作用与区别

    PS: https就是http和TCP之间有一层SSL层,这一层的实际作用是防止钓鱼和加密.防止钓鱼通过网站的证书,网站必须有CA证书,证书类似于一个解密的签名.另外是加密,加密需要一个密钥交换算法, ...

  7. http note

    http 多媒体传输协议 HyperText Transfer Protocol 超文本传输协议 https Hyper Text Transfer Protocol over Secure Sock ...

  8. 第11课 std::bind和std::function(2)_std::bind绑定器

    1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...

  9. cocos源码分析--ClippingNode绘图原理

    在OpenGL 绘制过程中,与帧缓冲有关的是模版,深度测试,混合操作.模版测试使应用程序可以定义一个遮罩,在遮罩内的片段将被保留或者丢弃,在遮罩外的片段操作行为则相反.深度测试用来剔除那些被场景遮挡的 ...

  10. CS229 6.13 Neurons Networks Implements of stack autoencoder

    对于加深网络层数带来的问题,(gradient diffuse  局部最优等)可以使用逐层预训练(pre-training)的方法来避免 Stack-Autoencoder是一种逐层贪婪(Greedy ...