vue 利用路由跨页传参
第一页,点击进入第二页进行传值:
<template>
<div id="app">
<div><router-link to="/">首页</router-link></div>
<div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二个页面</a></div>
<div><router-link to="/home">去home</router-link></div>
<router-view/> <a href="https://www.feiyit.com">abc</a>
</div>
</template> <script>
export default {
name: 'app',
methods:{
getMovieDetail(id) {
this.$router.push({
name: 'login',
params: {
id: id
}
})
}
}
}
</script> <style> </style>
第二页接收传值:
<template> </template> <script> export default {
name: 'login',
data () {
return {
uid:this.$route.params.id,
msg: '这是第二个页面'
}
},
computed: { },
mounted: function() {
console.log(this.uid);
},
methods:{ }
}
</script>
注意,如果刷新login页面,将失去传值
解决方法,在路由里面增加变量 其中【/login/:id】
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login/:id',
name: 'login',
component: login,
meta: {
title: '登录页'
}
},
{
path: '/home',
name: 'home',
component: home,
meta: {
title: '其他页'
}
}
]
})
vue 利用路由跨页传参的更多相关文章
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- 微信小程序~跳页传参
[1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- dolphinscheduler简单任务定义及复杂的跨节点传参
dolphinscheduler简单任务定义及跨节点传参 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16395094.html 写在前面 dolphinsc ...
- Apache DolphinScheduler 简单任务定义及复杂的跨节点传参
点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler Apache DolphinScheduler是一款非常不 ...
随机推荐
- 基本 Python 面试问题
目录 1.为什么学习Python? 2.通过什么途径学习的Python? 3.Python和Java.PHP.C.C#.C++等其他语言的对比? 4.简述解释型和编译型编程语言? 5.Python解释 ...
- 201871010105-曹玉中《面向对象程序设计(java)》第十周学习总结
201871010105-曹玉中<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- django学习-视图练习
写一个真正有用的视图 每个视图必须要做的只有两件事: 返回一个包含被请求页面内容的HttpResponse对象,或抛出一个异常,比如Http404. 至于你还想干些什么,随便你. 你的视图可以从数据库 ...
- loadrunner12 Runtime Settings位置
- django报错:django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module. Did you install mysqlclient?
django 迁移数据库报错 django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Did you ins ...
- [ Python入门教程 ] Python的控制语句
Python控制语句由条件语句.循环语句构成.控制语句根据条件表达式控制程序的流转.本章将介绍Python中控制语句的基本语法. 条件判断语句 (1)if条件语句 if语句用于检测某个条件是否成立.如 ...
- [LeetCode] 146. LRU Cache 最近最少使用页面置换缓存器
Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...
- 转 A 、B两张表,找出ID字段中,存在A表,但是不存在B表的数据
A.B两张表,找出ID字段中,存在A表,但是不存在B表的数据,A表总共13W数据,去重后大约3万条数据,B表有2W条数据,且B表的ID有索引. 方法一 使用not in,容易理解,效率低. selec ...
- 用友U8将存货核算期初单价金额回写到库存管理期初单价金额
在用友U8及相关产品中,库存管理期初要求必须录入数量,但单价和金额并不是必输的.从本人过去实施经验来看,为了保证ERP产品的快速上线,有不少企业只能先提供库存管理期初数量,而单价金额需要后续才能确定. ...
- Python处理数据集-1
原数据集的数据格式: 每行为:(test_User, test_Item) negativeItem1 negativeItem2 negativeItem3 …… negativeItem99 即每 ...