---
# System prepended metadata

title: 第 10 組的第六週討論
tags: [Vue 作品實戰班 - 2022 冬季班 第 10 組]

---

---
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
```javascript
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
      }
    ]
  }
];
```

### 圈圈
```javascript
  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
```javascript
 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
```javascript
 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
```javascript
 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')
      }
    ]
  }
]
```

### 威爾
![](https://i.imgur.com/ntlk7VO.png)



### 挑戰二：團隊測驗

| 題目 | 答案 |
| -------- | -------- | 
| 題目 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 伺服器與討論串
![](https://i.imgur.com/ZonNtAT.png)
![](https://i.imgur.com/xzYnY02.png)
![](https://i.imgur.com/W8UXsbI.png)
