一`目录参考对照
二`路由页设置
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>
三`效果展示
因为是示例所以丑了点啊哈哈哈哈