页面路由跳转并传值

路由跳转方式：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'}

是跳转页面后并传一个值