How to implement click switching page in vue

Vue implements the method of clicking to switch pages: 1. Register a component and use it in the parent element; 2. Use v-if and v-else to control the display and hiding of the page; 3. Give two The button binds events and controls the change of v-if value; 4. Customize the event and pass the value of the parent element to the child element for display on the page, thereby better displaying the switching effect of the page.

The operating environment of this tutorial: windows7 system, vue3, Dell G3 computer.

How to switch pages by clicking in vue?

Vue case--click the button to switch pages

Use vue to create a page switching effect.

Idea:

• Register a component and use it in the parent element.

• Use v-if and v-else to control the display and hiding of pages.

• Bind events to the two buttons (if it is the same method, use parameters to distinguish which button was clicked; if it is a different event, it is easy to distinguish), control v -if value changes.

• Customize the event and pass the value of the parent element to the child element for display on the page, thereby better displaying the switching effect of the page.

Parent component code:

<template>
    <div>
        <div className="boxs">
            <Page v-if="isShow" :pa="info1" style="background-color: lightpink;width: 200px; height:200px;"></Page>
            <Page v-else id="soecnd" :pa="info2"  style="background-color: lightskyblue;width: 200px; height:200px;"></Page>
            <button @click="fn(1)" >切换至第二个页面</button>
            <button @click="fn(2)">切换至第一个页面</button>
        </div>
    </div>
</template>
<script>
import Page from "./components2/Page.vue";
export default {
    data() {
        return {
            isShow: true,
            info1:"第一个页面",
            info2:"第二个页面"
        }
    },
    components: {
        Page
    },
    methods: {
        fn(i) {
            if (i == 1) {
                this.isShow = false
            } else if (i == 2) {
                this.isShow = true
            }
            console.log(2222)
        }
    }
}
</script>
<style scoped>
/* #soecnd {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
} */
</style>

Child component code:

<template>
    <div>
        <div class="pageBox">
            {{pa}}
        </div>
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            msg:"11111"
        }
    },
    props:["pa"]
}
</script>
 
<!-- <style>
    /* 如果这里有样式，页面渲染的时候一直是这个样式，父组件引入子组件时的行内样式也改不了样式 */
    .pageBox {
        width: 200px;
        height: 200px;
        background-color: coral;
    }
</style> -->

Recommended learning: "vue.js video tutorial 》

The above is the detailed content of How to implement click switching page in vue. For more information, please follow other related articles on the PHP Chinese website!