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

書籍目錄

快速登入

計數器