iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0

課程練習

新建完整的路由,並提供導覽進入大部分頁面(進入頁面僅需要文字,不必加入實際的頁面)

  • 使用 Vue Cli 完成路由設定
    前台頁面:

    • 首頁
    • 產品列表
      • 單一產品頁面
    • 購物車
    • 關於我們
    • 結帳
    • 結帳完成
  • 在 Vue Cli 中完成登入驗證
    後台頁面:

    • 登入頁面
    • 產品列表
    • 優惠券列表
    • 訂單列表
    • 圖片儲存列表

課程練習頁面

先建立.vue 的檔案,避免 CLI 馬上跳錯誤,通常第一個字大寫。

前台頁面:

  • 首頁 Home.vue
  • 產品列表 Products.vue
    • 單一產品頁面 Product.vue
  • 購物車 Cart.vue
  • 關於我們 About.vue
  • 結帳 Order.vue
  • 結帳完成 Checkout.vue

後台頁面:

  • 管理頁面 dashboard/Dashboard.vue
  • 登入頁面 Login.vue
  • 產品列表 dashboard/Products.vue'
  • 優惠券列表 dashboard/Coupons.vue
  • 訂單列表 dashboard/Order.vue
  • 圖片儲存列表 dashboard/Storages.vue

建立 router

// 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: '',
        name: '首頁',
        component: () => import('../views/Index.vue')
      },
      {
        path: '/about',
        name: '關於我們',
        component: () => import('../views/About.vue')
      },
      {
        path: '/products',
        name: '產品列表',
        component: () => import('../views/Products.vue')
      },
      { // 動態路由
        path: '/product/:id',
        name: '產品頁面',
        component: () => import('../views/Product.vue')
      },
      {
        path: '/cart',
        name: '購物車',
        component: () => import('../views/Cart.vue')
      },
      {
        path: '/order',
        name: '購物車結帳',
        component: () => import('../views/Order.vue')
      },
      {
        path: '/checkout',
        name: '購物車結帳完成',
        component: () => import('../views/Checkout.vue')
      }
    ]
  },
  {
    path: '/login',
    name: '登入頁',
    component: () => import('../views/Login.vue')
  },
  // 巢狀路由(管理介面)
  {
    path: '/admin',
    name: '管理頁面',
    component: () => import('../views/dashboard/Dashboard.vue'),
    children: [
      {
        path: 'products',
        name: '管理產品列表',
        component: () => import('../views/dashboard/Products.vue')
      },
      {
        path: 'coupons',
        name: '管理優惠券',
        component: () => import('../views/dashboard/Coupons.vue')
      },
      {
        path: 'order',
        name: '訂單列表',
        component: () => import('../views/dashboard/Order.vue')
      },
      {
        path: 'storages',
        name: '圖片儲存列表',
        component: () => import('../views/dashboard/Storages.vue')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router


上一篇
28. 表單驗證
下一篇
30. 鐵人賽心得
系列文
JS 作品實戰應用 - Vue 電商網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言