vue如何實現點擊切換頁面

本篇內容介紹了“vue如何實現點擊切換頁面”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

vue實現點擊切換頁面的方法：1、注冊一個組件，并在父元素中使用；2、使用v-if和v-else來控制頁面的顯示與隱藏；3、給兩個按鈕綁定事件，并控制v-if值的更改；4、自定義事件，將父元素的值傳給子元素，用來顯示到頁面上，從而更好顯示頁面的切換效果。

Vue案例--點擊按鈕切換頁面

用vue的方式做一個切換頁面的效果。

思路：

• 注冊一個組件，并在父元素中使用。

• 使用v-if 和 v-else 來控制頁面的顯示與隱藏。

• 給兩個按鈕綁定事件（如果是同一個方法，使用傳參來區別點擊的哪個按鈕；如果是不同的事件，就很好區分），控制v-if 值的更改。

• 自定義事件，將父元素的值傳給子元素，用來顯示到頁面上，從而更好顯示頁面的切換效果。

父組件代碼：

<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>

子組件的代碼：

<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> -->

“vue如何實現點擊切換頁面”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！