vue-router页面传值及接收值
主页 “去第二个页面”方法传值1
<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>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
login.vue页面接收值
在控制台可查看是否接受
<template>
<p>{{msg}}aaaaaaaaaaa</p>
</template> <script> export default {
name: 'login',
data () {
return {
uid:this.$route.params.id,
msg: '这是第二个页面'
}
},
computed: {
theme() {
return this.$store.getters.THEME_COLOR
}
},
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: '其他页'
}
}
]
})
Demo 奉上 https://pan.baidu.com/s/1eRFWTvc
vue-router页面传值及接收值的更多相关文章
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- mui 进行父子页面传值以及接收
1.在父级页面进行传值 (my) mui.openWindow({ url: 'a.html', id: 'a', extras: { my: 'listpub' },}); 2.自己页面接收值 mu ...
- 使用vue-router在页面之间传值及接收值
第一页 点击去第二页的时候进行传值直接贴代码看: <template> <div id="app"> <div><router-link ...
- IE 中创建 子窗口 传值 与接收值 【window.showModalDialog】
父窗口 创建一个窗口 var backinfo = window.showModalDialog('UserSelect.aspx', '', 'dialogHeight=600px; dialogW ...
- easyui中对于dialog页面传值的接收
dialog的功能是将B页面嵌入至A页面,这样,A页面作为B页面的父容器,所有的元素均可以被B页面访问 那么问题来了:我怎么获取B页面的链接参数呢? 其实很简单,只要找到B页面的存放容器即可: 代码如 ...
- React Router页面传值的三种方法
文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...
- Vue 编程之路(二)——跳转页面传值
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中我负责的部分有一项需要跳转页面,由于跳转前的页面是多个组件构成的,所以在跳转页面的 ...
随机推荐
- html节点操作与事件
<div id='a' style="width: 500px;height: 500px;background-color: grey;"> </div> ...
- ios8 UITableView section不显示
ios8 如果UITableView只设置viewForHeaderInSection,则可能section不能显示,iOS7及以下版本显示正常. 解决方案: 设置heightForHeaderInS ...
- 编辑距离12 · Edit Distance12
[抄题]: 给出两个单词word1和word2,计算出将word1 转换为word2的最少操作次数. 你总共三种操作方法: 插入一个字符 删除一个字符 替换一个字符 [思维问题]: [一句话思路]: ...
- SQL思维导图
- Web开发者工具下载
登录微信公众号:https://mp.weixin.qq.com
- 子查询 in 潜在的问题 - 建议最好别用
转至:http://wiki.lessthandot.com/index.php/Subquery_typo_with_using_in Subquery typo with using in Fro ...
- TextView等组件的LayoutParams不能随便用,不然组件不显示
TableLayout.LayoutParams lpRow = new TableLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTEN ...
- 解决Android启动显示空白界面的问题
Android程序启动时,第一个看的界面并不是我们的指定的第一个Activity界面,而是显示了一个空白的界面,带标题栏的,但是界面什么内容都没有,这个界面只显示不到1秒左右的时间就会切换到我们的第一 ...
- 2018.06.30 cdq分治
#cdq分治 ##一种奇妙的分治方法 优点:可以顶替复杂的高级数据结构:常数比较小. 缺点:必须离线操作. CDQ分治的基本思想十分简单.如下: 我们要解决一系列问题,包含修改和查询操作,我们将这些问 ...
- hdu-1107(模拟题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1107 注意:1.路线是要反向的,走不通就反向: 2.输入输出全部是整形 3.攻击力不断变化 #incl ...