單頁式應用

single-page application，縮寫 SPA
透過 JS 動態渲染當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗，使應用程式更像一個桌面應用程式。

router-view

將會改變的區塊使用 router-view 顯示

App.vue

1
2
3

<header />
<router-view></router-view>
<footer />

設定路由

將 Home、404 頁面直接一進入就 import，其他頁面使用動態 import 組件，點擊該頁面時，才會載入組件。
動態 import 組件 build 時每個頁面會是一支獨立的 JS。
如全部頁面直接一進入就 import，頁面一多時會影響效能; 但如果是小專案，頁面很少時，可以直接全部 import，減少 request 的數量。
大網站 => 動態載入，不吃效能
小網站 => 直接載入，減少 request 數量

router index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue"; // 直接 import
import NotFoundComponent from "../views/NotFoundComponent.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/rwd",
    name: "rwd",
    component: () => import("../views/Rwd.vue"), // 動態 import
  },
  {
    path: "/vuejs",
    name: "vuejs",
    component: () => import("../views/Vuejs.vue"),
  },
  {
    path: "/reactjs",
    name: "reactjs",
    component: () => import("../views/Reactjs.vue"),
  },
  {
    path: "/html5",
    name: "html5",
    component: () => import("../views/Html5.vue"),
  },
  {
    path: "/nodejs",
    name: "nodejs",
    component: () => import("../views/Nodejs.vue"),
  },
  { path: "/:pathMatch(.*)", component: NotFoundComponent }, // 需放最下面，上面的path都沒有時即顯示此頁面
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

router 例外處理(404)

{ path: “/:pathMatch(.*)”, component: NotFoundComponent }
404 頁面的 path 需放最下面，載入時會從上到下開始跑，上面的 path 都沒有 Match 時即會顯示此頁面

History modes

createWebHashHistory()
會透過 # 字號來當作網址切換的操作，但是會跟錨點相撞，對 SEO 有不利的影響

createWebHistory()
需要跟後端搭配重新配置根目錄下的 router，還要自己配置例外處理的頁面例如 404 等

router-link

設定 router-link 指向連結頁面

header.vue

<router-link to="/rwd">RWD</router-link>
<router-link to="/vuejs">VUEJS</router-link>
<router-link to="/reactjs">REACTJS</router-link>
<router-link to="/html5">HTML5</router-link>
<router-link to="/nodejs">NODEJS</router-link>

以上是我的學習筆記，希望也有幫助到你哦 😀

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

Vue Router 網址路由設定、History modes