vue中路由组件传参

path-query

参数拼接在地址栏上

html代码： <div id="app"> <router-link to="user">user</router-link> <router-link to="manager">manager</router-link> <router-view></router-view> </div> js代码： let user = { template:` <div @click="userHandler">普通用户</div> `, data() { return { list:"hello", obj:{ name:'tom', age:3 } } }, methods: { userHandler() { // 跳转 this.$router.push({ path:'/manager', query:{ list:this.list, obj:JSON.stringify(this.obj) } }) } }, } let manager = { template:` <div>管理员 {{$route.query.list}} {{$route.query.obj}}</div> ` } let router = new VueRouter({ routes:[{ path:'/user', component:user },{ path:'/manager', component:manager }] }) new Vue ({ el:"#app", router })

name-params

html代码： <div id="app"> <router-link to="user">user</router-link> <router-link to="manager">manager</router-link> <router-view></router-view> </div> js代码： let user = { template:` <div @click="userHandler">普通用户</div> `, data() { return { list:"hello", obj:{ name:'tom', age:3 } } }, methods: { userHandler() { // 跳转 this.$router.push({ name:'m', params:{ list:this.list, obj:JSON.stringify(this.obj) } }) } }, } let manager = { template:` <div>管理员 {{$route.params.list}} {{$route.params.obj}}</div> ` } let router = new VueRouter({ routes:[{ path:'/user', component:user, name:'u' },{ path:'/manager', component:manager, name:'m' }] }) new Vue ({ el:"#app", router })