Kapitel 2 vue3+Ts-Projekt-Routing-Konfiguration

1. Änderung der Routing-Konfiguration

1. Grundlegendes Routing

1. Erstellen Sie zunächst einen neuen Ansichtsordner, dann einen neuen Home-Ordner und erstellen Sie index.vue
2. Konfigurieren Sie in der Datei main.ts

   import { createApp } from 'vue'
   import './style.css'
   import App from './App.vue'
   //routes
   import router from "./routes/index"
   const app = createApp(App);
   app.use(router);
   app.mount('#app');

3. Erstellen Sie einen neuen Routenordner und anschließend eine neue index.ts-Datei

   import { createRouter, createWebHashHistory } from 'vue-router'
   const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
     routes: [
       {
         path: '/',
         redirect: '/home'
       },
       {
         path: '/home',
         name: 'home',
         meta: {
           title: "首页",
           hiddenTopBar: true
         },
         component: () => import('../views/home/index.vue')
       }
     ]
   })
   export default router
   

4. Öffnen Sie den Browser und geben Sie http://localhost:xxxx/#/home ein

2. Submodul-Routing

1. Erstellen Sie einen neuen Router-Ordner

   import { createRouter, createWebHashHistory } from 'vue-router'
   import signupRouter from './modules/signup'
   import completeInfoRouter from './modules/completeInfo'
   import forgotPwdRouter from './modules/forgotPwd'
   import materialRouter from './modules/material'
   
   const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
     routes: [
       {
         path: '/',
         redirect: '/signup'
       },
       {
         path: '/login',
         name: 'login',
         component: () => import('@/views/login.vue')
       },
       signupRouter,
       completeInfoRouter,
       forgotPwdRouter,
       materialRouter
     ]
   })
   
   /**
    * @description 路由拦截 beforeEach
    * */
   router.beforeEach(async (to, from, next) => {
     // 动态设置标题
     const title = import.meta.env.VITE_GLOB_APP_TITLE
     document.title = to.meta.title ? (to.meta.title as string) : title
     next()
   })
   
   export default router
   

2. Erstellen Sie neue Module im Router-Ordner
   1. Initialisieren und erstellen Sie dann Routen für jedes Modul, z. B. Erstellen von Routen für Anmeldemodule, Routen für Benutzerinformationen usw.
   2. Erstellen Sie einen neuen SignupRouter, andere können dies nachahmen

      const signupRouter = {
        path: '/signup',
        redirect: '/signup/school',
        children: [
          {
            path: '/signup/school',
            name: 'school',
            component: () => import('@/views/signup/school/index.vue'),
            meta: {
              title: 'xxxx'
            }
          },
        ]
      }
      export default signupRouter