第一页,点击进入第二页进行传值:
<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>
第二页接收传值:
<template> </template> <script> export default { name: 'login', data () { return { uid:this.$route.params.id, msg: '这是第二个页面' } }, computed: { }, 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: '其他页' } } ] })