路由跳转方式:this.$router.push
路由传参方式:this.$route.query
页面1
<template> <div> <Button type="Primary" @click="() => {this.$router.push({path: '/demo',query: {color: 'blue'}})}"> 跳到demo </Button> </div> </template> <script> export default { } </script>
跳转到页面2
<template> <div> <div class="box"> <div class="left" > <RadioGroup v-model="colors" @on-change="isshow"> <Radio :label="site.color" v-for="(site, index) in sites" :key="index"> {{ site.name }} </Radio> </RadioGroup> </div> <div class="right"> <p :style="`color: ${color}`">{{text}}</p> </div> </div> </div> </template> <script> export default { name: '', mounted () { //console.log(this.$route) //console.log(this.$route.query.name) this.colors=this.$route.query.color }, data () { return { name: 'demo', text: '', color: '', colors:'', sites: [ { name: '红色', color:'red' }, { name: '黄色', color: 'yellow' }, { name: '蓝色', color:'blue' } ] } }, methods: { isshow () { // console.log(this.colors) this.color = this.colors let w = this.sites.filter(item => this.color===item.color) this.text = w[0].name } } } </script>
样式展示:
跳转之前的页面
点击此按钮跳转到另一个页面
并实现点击对应的颜色后右边的字也变成对应颜色
注:实现两个页面之间跳转首先要建立两个页面和相应路由
页面1中的
query: {color: 'blue'}
是跳转页面后并传一个值