laravel不用路由，用vue组件，完成一个网页的子页面切换

先上效果：

结构逻辑，父UserCenter这个页面里，有三个子页面，我的资料MyProfile，我的产品MyProducts以及我的需求MyRequests。

代码结构如下：（用路径结构表达）

./UserCenter.vue  #代码举例

./Components/MyProfile.vue #代码举例

./Components/MyProducts.vue 

./Components/MyRequests.vue

接下来是具体的代码细节，已经删除了无关内容。因此代码无法直接运行查看。

#UserCenter.vue: 主要是button里面加塞的function，v-if的应用。function写的极其恶心，实在不太会vue。

<template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <div class="flex justify-between m-auto">
                        <div class="items-center flex justify-center min-w-full">
                            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500" id="tabExample" role="tablist">
                                <li class="mr-20" role="presentation">
                                    <button @click='pickme("myPrf")' 
                                    :style="{
                                                backgroundColor: myPrf ? 'blue' : '',
                                                color: myPrf ? 'white' : '',
                                    }"
                                    class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab-example" type="button" role="tab" aria-controls="profile-example" aria-selected="false">我的资料</button>
                                </li>
                                <li class="mr-20" role="presentation">
                                    <button  @click='pickme("myPrd")' 
                                    :style="{
                                                backgroundColor: myPrd ? 'blue' : '',
                                                color: myPrd ? 'white' : '',
                                    }"
                                    class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">我的产品</button>
                                </li>
                                <li class="mr-20" role="presentation">
                                    <button  @click='pickme("myReq")' 
                                    :style="{
                                                backgroundColor: myReq ? 'blue' : '',
                                                color: myReq ? 'white' : '',
                                    }"
                                    class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">我的需求</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                     <MyProfile v-if="myPrf"></MyProfile>
                     <MyProducts v-if="myPrd"></MyProducts>
                     <MyRequests v-if="myReq"></MyRequests>
                </div>
            </div>
        </div>
</template>

<script>
import MyProfile from "../Pages/Components/MyProfile";
import MyProducts from "../Pages/Components/MyProducts";
import MyRequests from "../Pages/Components/MyRequests";

export default {
    name: "UserCenter",
    data: () => ({
        myPrf:true,
        myPrd:false,
        myReq:false,
    }),
    components: { Head, Link, MyProfile, MyProducts, MyRequests },
    methods: {
        pickme(value) {
            if (value === "myPrf") {
                this.myPrf = true
                this.myPrd = false
                this.myReq = false
            }
            if (value === "myPrd") {
                this.myPrf = false
                this.myPrd = true
                this.myReq = false
            }
            if (value === "myReq") {
                this.myPrf = false
                this.myPrd = false
                this.myReq = true
            }
        }
    },

}
</script>

<style scoped>

</style>

#MyProfile.vue:

<template>
    <div class="flex justify-c  enter">
                    <div class="flex justify-center flex-col">
                        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                            <label id="name" name="name" class="block text-sm font-medium text-gray-700">{
   
   {$page.props.auth.user.name}}</label>
                        </div>
                    </div>
    </div>
</template>
<script>

export default {
    name: "MyProfile",
}
</script>
<style scoped>

</style>