9-1 配置路由

1. 修改 src\router\index.js，配置需要的路由，例如：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from '../views/Home.vue'
   import About from "../views/About.vue";
   import AboutHome from "../views/About/index.vue";
   import Guide from "../views/About/Guide.vue";
   import Reference from "../views/About/Reference.vue";
   import Changelog from "../views/About/Changelog.vue";
   import GitHub from "../views/About/GitHub.vue";
   import NotFound from '@/views/NotFound.vue'
   
   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/Chat',
       name: 'Chat',
       component: () => import('@/components/Chat.vue')
     },
     {
       path: "/Courses/:id",
       name: "Courses_id",
       component: () => import("../views/Courses/_id.vue"),
     },
     {
       path: "/about",
       name: "About",
       component: About,
       children: [
         {
           path: "",
           component: AboutHome,
         },
         {
           path: "guide",
           component: Guide,
         },
         {
           path: "reference",
           component: Reference,
         },
         {
           path: "changelog",
           component: Changelog,
         },
         {
           path: "gitHub",
           component: GitHub,
         },
       ],
     },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
       component: NotFound
     },
   
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

   Copy

    

   1. 全部載入（簡單架構適用）：要先import Home from '../views/Home.vue'，然後設為component: Home即可
   2. 動態載入（複雜架構才需要）：不事先載入：component: () => import('@/components/Chat.vue')
   3. 若是有傳入變數的，用「:變數」來設定 path
   4. 利用 children:[] 來做路由套嵌（在某個頁面裡面的一堆連結）
      1. 預設的頁面要設為 path: "",
   5. 預設history模式為 createWebHistory(process.env.BASE_URL)，若遇到 http://xxx/index.html 會失效（請後端重新設定網站設定）
   6. 若將history模式改為 createWebHashHistory()，網只會變成 http://xxx/index.html#/，可解決上方問題，但會跟原始錨點#相衝，SEO也不好（所以不建議，常用於後台界面）
   7. 例外處理path: '/:pathMatch(.*)*',
2. 接著修改主架構，以及個別頁面的內容。
3. 修改 App.vue，設定頁面欲呈現的主要架構，其中用<router-view></router-view>來顯示路由內容，其餘部份就是頁首、頁尾等固定的呈現區域

   <script>
   import Header from "@/components/Header.vue";
   import Footer from "@/components/Footer.vue";
   export default {
     components: {
       Header,
       Footer,
     },
   };
   </script>
   
   <template>
     <div>
       <Header></Header>
       <router-view></router-view>
       <Footer></Footer>
     </div>
   </template>
   <style lang="scss">
   * {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     font-family: "Microsoft JhengHei", "Heiti TC", "sans-serif";
   }
   img {
     display: block;
   }
   html,
   body {
     width: 100%;
     height: 100%;
   }
   </style>

   Copy

    

4. 修改其中的 src\views\Home.vue 的頁面內容

   <script>
   import Article from "@/components/Article.vue";
   import Aside from "@/components/Aside.vue";
   import Main from "@/components/Main.vue";
   
   export default {
     name: 'Home',
     components: {
       Article,
       Aside,
       Main,
     }
   }
   </script>
   
   <template>
       <Article></Article>
       <Aside></Aside>
       <Main></Main>
   </template>

   Copy

    

5. src\views\NotFound.vue 內容（配合例外處理用）

   <script>
   export default {};
   </script>
   
   <template>
     <div id="NotFoundpage">
       <div>
         <h3>404 Not Found</h3>
       </div>
     </div>
   </template>
   
   <style lang="scss" scoped>
   #NotFoundpage {
     width: 100%;
     height: 578px;
     background: rgb(211, 118, 118);
     background-size: cover;
   
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     > div {
       > h3 {
         text-align: center;
         font-size: 48px;
         color: #fff;
         @media screen and (max-width: 1044px) {
           font-size: 30px;
         }
       }
       > p {
         text-align: center;
         font-size: 14px;
         color: #fff;
         line-height: 3em;
         @media screen and (max-width: 1044px) {
           font-size: 14px;
           line-height: 25px;
         }
       }
       @media screen and (max-width: 1044px) {
         width: 90%;
         height: auto;
         margin: 0 auto;
       }
     }
     @media screen and (max-width: 730px) {
       height: 349px;
     }
     @media screen and (max-width: 640px) {
       height: 175px;
     }
   }
   </style>

   Copy