Vue3单击页内切换(个人学习记录)

一`目录参考对照

二`路由页设置

index.ts

import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',//路径
            name: 'lable',
            component: () => import('../views/lable.vue'),
            // 普通单击切换
        }, {
            path: '/log',//路径
            name: 'log',
            component: () => import('../views/log/logHome.vue'),
            // 页内切换主体(不变的)
            children: [
                {
                    path: '/log/logon',//路径
                    component: () => import('../views/log/page/logon.vue')
                    //   页内切换变得1
                }, {
                    path: '/log/login',//路径
                    component: () => import('../views/log/page/login.vue')
                    //   业内切换变得2
                }
            ]
        }
    ]
})

export default router

三`页面设置

此处仅作参考,在这里我选择element-plus框架

logHome.vue

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "logHome"
})
</script>

<template>
<!--  登录注册主页-->
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
<!--        左边那一趟-->
        <router-link to="/log/login">登录</router-link>
        <router-link to="/log/logon">注册</router-link>
      </el-aside>
      <el-main>
        呦~欢迎回家!(满眼小星星)
        <router-view/>
<!--        ↑这个是锚点(指定在这显示)-->
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>

</style>

logon.vue

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "logon"
})
</script>

<template>
<!--注册-->
  <h1>假如我是注册页面</h1>
</template>

<style scoped>

</style>

login.vue

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: "login"
})
</script>

<template>
<!--登录-->
  <h1>假如我是登录页面</h1>
</template>

<style scoped>

</style>

三`效果展示

因为是示例所以丑了点啊哈哈哈哈