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>' } ...
随机推荐
- [UE4]增加机器人
一.新增蓝图继承自Shooter名为AIShooter.玩家角色也是继承自Shooter. 二.使用AIMoveTo追踪玩家.玩家控制的角色调用这个方法没反应. 三.关卡中添加组件NavMeshBou ...
- AnimationDrawable写贞动画,播放完毕停止在第一或最后一帧
animation.stop();animation.selectDrawable(0);//只需要在停止的时候,设置下标为你想要的一帧就好了
- 0000 - Spring MVC 原理以及helloworld
1.概述 Spring MVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品.以Spring IOC容器为基础,并利用容易的特性来简化它的配置.Spring MVC相当于Spr ...
- keras的LSTM函数详解
keras.layers.recurrent.LSTM(units, activation='tanh', recurrent_activation='hard_sigmoid', use_bias= ...
- ODBC数据源管理器-》系统DSN-》没有....Microsoft Access Driver(*mdb,*,accdb)
问题如标题: 解决方法:打开目录:“C:\Windows\SysWOW64”,双击该目录下的“odbcad32.exe”文件,就进去ODBC数据源管理界面了,现在这个界面中就有access的驱动了!
- Docker 系列01: Centos7.3 上安装docker
Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务,比如经过官方测试认证过的基础设施.容器 ...
- DateTimepicker中的星期问题
开发机:win10 64+VS2013 客户机:win7 32bit 在项目中使用DateTimepicker,需要将时间获取到,然后转换为string,然后再转换为DateTime类型.开发机器上测 ...
- 05 Linux系统下的用户以及用户权限管理(权限管理介绍、用户管理、常见命令介绍)
这一节我们介绍Linux的用户以及权限管理的前半段,包括:1.权限管理介绍: 2.用户管理: 3.常见命令 权限管理介绍 权限管理: 为了访问计算机资源,我们需要对其进行授权才能访问,根据什么东西来进 ...
- RabbitMQ install (Ubuntu)
1. key 1) Online way apt-key adv --keyserver "hkps.pool.sks-keyservers.net" --recv-keys &q ...
- scrapy框架之日志等级和请求传参-cookie-代理
一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...