vue-router页面传值及接收值
Posted 爱搞事情的奋斗小青年
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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页面传值及接收值的主要内容,如果未能解决你的问题,请参考以下文章