---
tags: Vue 實戰班
---

## main.js

## VS Code 終端機 Vue Cli指令

npm run serve
npm run build

## Router
### 網址列上的#/符號
> 如果是SPA架構的話(Single Page Application)
之前是伺服器後端給的路徑，之後是前端模擬的。
讓頁面顯示透過前端路由進行，可以避免後端提供頁面顯示時產生的閃爍，使用者體驗較好。

### Router 運用方法
#### 前台頁面
- 首頁 /
- 關於我們 /about
- 產品列表 /products
- 單一產品頁面 /product
- 購物車
- 購物成功

#### 後台管理頁面
- 登入頁面 /login
- 產品管理頁面/admin/products
- 優惠券管理頁面/admin/coupons
- 訂單管理頁面

#### 假設有以上路由要建立，則步驟可為
1. 開.vue檔案 ex: Cart.vue
2. 建立路由 ex: router/index.js
3. 加入路徑 router-link ex: App.vue -> \<router-link>
4. 加入`<router-view />`

#### 巢狀路由

const routes = [
  {
    // 單層路由(path開頭需有/符號)
    path: '/admin',
    name: 'Dashboard',
    component: () => import('../views/dashboard/Dashboard.vue'),
    // 巢狀路由(path開頭不需有/符號，將相同結構放在children的array下即可)
    children: [
      {
        path: 'products',
        name: 'admin.products',
        component: () => import('../views/dashboard/Products.vue'),
      },
      {
        path: 'coupons',
        name: 'admin.coupons',
        component: () => import('../views/dashboard/Coupons.vue'),
      },
    ],
  },
]

## 登入驗證技巧 (7/24週六直播講)
如果已經登出，不該留在需要登入權限的頁面