:::

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
    

     

    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>
    

     

  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>

     

  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>

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1746

計數器

今天: 2636263626362636
昨天: 3755375537553755
總計: 4458475445847544584754458475445847544584754458475