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

时间:2022-12-24 05:04:05

第一页 点击去第二页的时候进行传值直接贴代码看:

<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>

红色部分为传值部分,使用this.$router.push()进行传值

第二页面接收从第一个页面传递过来的参数 id

<template>

</template>

<script>

export default {
name: 'login',
data () {
return {
uid:this.$route.params.id,
msg: '这是第二个页面'
}
},
computed: { },
mounted: function() {
console.log(this.uid);
},
methods:{ }
}
</script>

  红色部分打印下传递过来的id值,在接受传值的页面里使用this.$route.params.id 即可获取到传递的值

注意,如果刷新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: '其他页'
}
}
]
})