主页  “去第二个页面”方法传值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页面传值及接收值的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. mui 进行父子页面传值以及接收

    1.在父级页面进行传值 (my) mui.openWindow({ url: 'a.html', id: 'a', extras: { my: 'listpub' },}); 2.自己页面接收值 mu ...

  3. 使用vue-router在页面之间传值及接收值

    第一页 点击去第二页的时候进行传值直接贴代码看: <template> <div id="app"> <div><router-link ...

  4. IE 中创建 子窗口 传值 与接收值 【window.showModalDialog】

    父窗口 创建一个窗口 var backinfo = window.showModalDialog('UserSelect.aspx', '', 'dialogHeight=600px; dialogW ...

  5. easyui中对于dialog页面传值的接收

    dialog的功能是将B页面嵌入至A页面,这样,A页面作为B页面的父容器,所有的元素均可以被B页面访问 那么问题来了:我怎么获取B页面的链接参数呢? 其实很简单,只要找到B页面的存放容器即可: 代码如 ...

  6. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  7. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  8. WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性和超链接点击弹出警示框

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值方式: href="地址?key=v ...

  9. Vue 编程之路(二)——跳转页面传值

    最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中我负责的部分有一项需要跳转页面,由于跳转前的页面是多个组件构成的,所以在跳转页面的 ...

随机推荐

  1. html节点操作与事件

    <div id='a' style="width: 500px;height: 500px;background-color: grey;"> </div> ...

  2. ios8 UITableView section不显示

    ios8 如果UITableView只设置viewForHeaderInSection,则可能section不能显示,iOS7及以下版本显示正常. 解决方案: 设置heightForHeaderInS ...

  3. 编辑距离12 · Edit Distance12

    [抄题]: 给出两个单词word1和word2,计算出将word1 转换为word2的最少操作次数. 你总共三种操作方法: 插入一个字符 删除一个字符 替换一个字符 [思维问题]: [一句话思路]: ...

  4. SQL思维导图

  5. Web开发者工具下载

    登录微信公众号:https://mp.weixin.qq.com

  6. 子查询 in 潜在的问题 - 建议最好别用

    转至:http://wiki.lessthandot.com/index.php/Subquery_typo_with_using_in Subquery typo with using in Fro ...

  7. TextView等组件的LayoutParams不能随便用,不然组件不显示

    TableLayout.LayoutParams lpRow = new TableLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTEN ...

  8. 解决Android启动显示空白界面的问题

    Android程序启动时,第一个看的界面并不是我们的指定的第一个Activity界面,而是显示了一个空白的界面,带标题栏的,但是界面什么内容都没有,这个界面只显示不到1秒左右的时间就会切换到我们的第一 ...

  9. 2018.06.30 cdq分治

    #cdq分治 ##一种奇妙的分治方法 优点:可以顶替复杂的高级数据结构:常数比较小. 缺点:必须离线操作. CDQ分治的基本思想十分简单.如下: 我们要解决一系列问题,包含修改和查询操作,我们将这些问 ...

  10. hdu-1107(模拟题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1107 注意:1.路线是要反向的,走不通就反向: 2.输入输出全部是整形 3.攻击力不断变化 #incl ...