主页 “去第二个页面”方法传值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