XOOPS輕鬆架

Vue.js 3.0 筆記

9-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

全部載入（簡單架構適用）：要先import Home from '../views/Home.vue'，然後設為component: Home即可
動態載入（複雜架構才需要）：不事先載入：component: () => import('@/components/Chat.vue')
若是有傳入變數的，用「:變數」來設定 path
利用 children:[] 來做路由套嵌（在某個頁面裡面的一堆連結）
1. 預設的頁面要設為 path: "",
預設history模式為 createWebHistory(process.env.BASE_URL)，若遇到 http://xxx/index.html 會失效（請後端重新設定網站設定）
若將history模式改為 createWebHashHistory()，網只會變成 http://xxx/index.html#/，可解決上方問題，但會跟原始錨點#相衝，SEO也不好（所以不建議，常用於後台界面）
例外處理path: '/:pathMatch(.*)*',

接著修改主架構，以及個別頁面的內容。

修改 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>

修改其中的 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>

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>

9. Vue Router