XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 修改` src\router\index.js`，配置需要的路由，例如： 
    ```javascript
    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
    
    ```
    
    
    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>`來顯示路由內容，其餘部份就是頁首、頁尾等固定的呈現區域 
    ```markup
    <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>
    
    ```
4. 修改其中的 `src\views\Home.vue` 的頁面內容 
    ```markup
    <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>
    ```
5. `src\views\NotFound.vue` 內容（配合例外處理用） 
    ```markup
    <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>
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1746

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器