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>' } ...
随机推荐
- 【ApplicationContext】通过实现ApplicationContextAware接口获取bean
SpringApplicationUtils.java import org.springframework.beans.BeansException; import org.springframew ...
- C#、AE开发入门之打开shp文件并显示
首先要建立好对应的对话框程序,并拖入axMapControl控件和axLisence控件,并设置一个按钮打开该文件 当然在使用前一定要绑定对应的ArcGis产品 static void Main() ...
- PAT 乙级 1020 月饼 (25) C++版
1020. 月饼 (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 月饼是中国人在中秋佳节时吃的一种传统食 ...
- 显示定位方法,提取中间text 封装成函数的方法
tager='工作台' element=WebDriverWait(self.dr,15,0.1).until( eval("lambda x: x."+'find_element ...
- Hive数据导入导出的几种方式
一,Hive数据导入的几种方式 首先列出讲述下面几种导入方式的数据和hive表. 导入: 本地文件导入到Hive表: Hive表导入到Hive表; HDFS文件导入到Hive表; 创建表的过程中从其他 ...
- docker entrypoint入口文件详解
docker entrypoint入口文件详解 pasting Dockerfile创建自定义Docker镜像以及CMD与ENTRYPOINT指令的比较 [k8s]args指令案例-彻底理解docke ...
- [UE4]非常实用的SizeBox控件
Desired:表示以期望的实际尺寸显示视图. SizeBox最好作为Child Widget的根节点.(如果SizeBox的父节点是Canvas Panel,SizeBox会变成可拉伸,ChildL ...
- [UE4]Cast to转换数据类型
可以转换纯函数,这样就可以不用加执行线了.
- [UE4]在AI Character中要获得AI的controller,需要使用Get AIController
- Centos 7 下, 安装odoo 10
1. Centos在虚拟机中, 最小化安装, 网络连接选择的是 桥接模式, 安装完成后, 是不能直接上网的, 输入root 和密码, 登录进去, 然后执行: [root@localhost ~]# v ...