頁面路由跳轉並傳值

頁面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'}

是跳轉頁面後並傳一個值