【修剪】代码目录结构

src/App.vue

@@ -1,15 +1,16 @@
 <script setup>
     import { computed } from 'vue';
     import { useRoute } from 'vue-router';
-    import ExampleView from '@/views/ExampleView/ExampleView.vue';
+    import LoginView from '@/views/LoginView/LoginView.vue';
+    import MainContainer from '@/layout/MainContainer.vue';
 
     const route = useRoute();
     const currentContainer = computed(() => {
         const { name } = route;
         if (!name) return null;
 
-        const { [name]: view } = { ExampleView };
-        return view || null;
+        const { [name]: view } = { LoginView };
+        return view || MainContainer;
     });
 </script>
 

src/layout/MainContainer.vue

@@ -0,0 +1,11 @@
+<script setup>
+    import { RouterView } from 'vue-router';
+</script>
+
+<template>
+    <RouterView />
+</template>
+
+<style lang="less" module="s">
+    //
+</style>

src/router/index.js

@@ -1,9 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router';
+// import auth from '@/utils/auth';
 
 const ExampleView = () => import('@/views/ExampleView/ExampleView.vue');
+const LoginView = () => import('@/views/LoginView/LoginView.vue');
 
 const routes = [
+    {
+        path: '/',
+        redirect: () => '/login',
+    },
+
     { path: '/example', name: 'ExampleView', component: ExampleView },
+
+    { path: '/login', name: 'LoginView', component: LoginView },
 ];
 
 const router = createRouter({
@@ -11,4 +20,17 @@ const router = createRouter({
     routes,
 });
 
+// 前置路由钩子
+// router.beforeEach((to, from, next) => {
+//     // 必须先登录
+//     if (!['LoginView'].includes(to.name) && !auth.checkToken()) {
+//         return next({
+//             name: 'LoginView',
+//             replace: true,
+//         });
+//     }
+//
+//     return next();
+// });
+
 export default router;

src/views/LoginView/LoginView.vue

@@ -0,0 +1,13 @@
+<script setup>
+</script>
+
+<template>
+    <div :class="s.root">LoginView</div>
+</template>
+
+<style lang="less" module="s">
+    .root {
+        :global {
+        }
+    }
+</style>