---
tags: Vue 作品實戰班 - 2022 冬季班 第 10 組
---

# 第 10 組的第六週討論

> 小組討論時間 : 2023/02/13 20:00

|組員名單| 報到 |
|------|-----|
|CofCat #9226|:heavy_check_mark:|
|薯餅 #3581|:heavy_check_mark:|
|Eileen #6454|:heavy_check_mark:|
|黑白兔 #0684|:heavy_check_mark:|
|Jiang V #9858|:heavy_check_mark:|
|kuku #3118|:heavy_check_mark:|
|圈圈 #4060|:heavy_check_mark:|
|威爾 #1694|:heavy_check_mark:|
|Yishan #4902|:heavy_check_mark:|
|Keep(k.wei) #4336|:heavy_check_mark:|

---

## 挑戰一：參考主流網站或學長姐作品，撰寫路由表

路由對於許多同學是相對比較陌生的，因此可以先從已經完成的網站著手，試著反推出該網站的路由表

製作範例：

尋找已經在線的網站，例如作品牆上的作品 https://works.hexschool.io/#/ ，或任何在運行中的商業網站
範例作品：https://huan5678.github.io/chill-bar/#/
撰寫路由表，僅需要撰寫路徑及名稱，不需要搭配元件

### CofCat

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: LoginPage
  },
  {
    path: '/',
    name: 'Home',
    component: HomePage,
    children: [
      {
        path: 'productList',
        name: 'ProductList',
        component: ProductListPage
      },
      {
        path: 'shopCart',
        name: 'ShopCart',
        component: ShopCartPage
      },
      {
        path: 'checkout',
        name: 'Checkout',
        component: Checkout
      },
      {
        path: 'order',
        name: 'Order',
        component: Order
      }
    ]
  }
];

### 圈圈

  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("../views/indexView.vue"),
    },
    {
      path: "/login",
      name: "login",
      component: () => import("../views/loginView.vue"),
    },
    {
      path: "/user/:id",
      children: [
        {
          path: "home",
          name: "userHome",
          component: () => import("../views/userView.vue"),
        },
        {
          path: "orders",
          name: "orders",
          component: () => import("../views/ordersView.vue"),
        },
        {
          path: "collects",
          name: "collects",
          component: () => import("../views/collectsView.vue"),
        },
        {
          path: "reserve",
          name: "reserve",
          component: () => import("../views/reserveView.vue"),
        },
      ],
    },
    {
      path: "/admin/:id",
      children: [
        {
          path: "home",
          name: "adminHome",
          component: () => import("../views/admin-coursesView.vue"),
        },
        {
          path: "manage",
          name: "adminManage",
          component: () => import("../views/admin-manageView.vue"),
        }
      ],
    },
    {
      path: "/courses",
      name: "courses",
      component: () => import("../views/coursesView.vue"),
    },
    {
      path: "/course/:id",
      component: () => import("../views/courseView.vue"),
    },
    {
      path: "/shoppingMall",
      name: "shoppingMall",
      component: () => import("../views/shoppingMallView.vue"),
    },
    {
      path: "/product/:id",
      component: () => import("../views/productView.vue"),
    },
    {
      path: "/shopCart/:id",
      children: [
        {
          path: "list",
          component: () => import("../views/shopCartView.vue"),
        },
        {
          path: "info",
          name: "buyerInfo",
          component: () => import("../views/buyerInfoView.vue"),
        },
      ],
    },
  ],

### Yishan

 const routes = [
    {
      path: '/homepage',
      component: HomePage,
      children: [
        {
          path: 'courses',
          component: CoursesView
        },
        {
          path: 'articles',
          component: ArticlesView
        },
        {
          path: 'order',
          component: OrderView
        }
      ]
    },
    {
      path: '/admin',
      component: HomePage,
      children: [
        {
          path: 'coursesList',
          component: CoursesList
        },
        {
          path: 'articles',
          component: ArticlesList
        },
        {
          path: 'orderList',
          component: OrderList
        }
      ]
    }
  ];

### kuku

 const routes = [
    {
      path: "/",
      name: "home",
      component: HomeView,
      children: [
        {
          path: "products",
          name: "products",
          component: ProductsView.vue,
        },
        {
          path: "product/:id",
          name: "product",
          component: ProductView.vue.vue,
        },
        {
          path: "cart",
          name: "cart",
          component: CartView.vue,
        },
        {
          path: "order",
          name: "order",
          component: OrderView.vue,
        },
      ],
    },
  ];

### Jiang

 const routes = [
  {
    path: '/',
    // name: 'FrontView',
    component: () => import('../views/FrontView.vue'),
    children: [
      {
        path: '',
        // name: 'Home',
        component: () => import('../views/FrontView/HomeView.vue')
      },
      {
        path: 'about',
        // name: 'about',
        component: () => import('../views/FrontView/UserAbout.vue')
      },
      {
        path: 'products',
        // name: 'products',
        component: () => import('../views/FrontView/UserProducts.vue')
      },
      {
        path: 'product/:id',
        // name: 'product/:id',
        component: () => import('../views/FrontView/UserProductDetail.vue')
      },
      {
        path: 'cart',
        // name: 'cart',
        component: () => import('../views/FrontView/UserCart.vue')
      }
    ]
  }
]

### 威爾

### 挑戰二：團隊測驗

| 題目 | 答案 |
| -------- | -------- |
| 題目 01 | 3 |
| 題目 02 | 2 |
| 題目 03 | 2 |
| 題目 04 | 2 |
| 題目 05 | <router-view> |
| 題目 06 | <router-link> |
| 題目 07 | 3 |
| 題目 08 | this.$router.push(`/product/${productId}`) |
| 題目 09 | linkActiveClass |
| 題目 10 | 2 |

---

## 討論過程
### 工具：Discord 伺服器與討論串