29. 建立路由

课程练习

新建完整的路由,并提供导览进入大部分页面(进入页面仅需要文字,不必加入实际的页面)

  • 使用 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


<<:  [Day30] 持续整合与部署 - 我与 ASP.NET Core 3 的 30天

>>:  Day 29:IRQ (Part 3) - 这是核心执行绪的味道!Threaded IRQ

资讯治理(Data Governance)

数据管理员(Data Steward) 数据管理员是组织中的一个角色,负责利用组织的数据治理流程来...

Day26 ( 高级 ) 放烟火 2 ( 爆炸效果 )

放烟火 2 ( 爆炸效果 ) 教学原文参考:放烟火 2 ( 爆炸效果 ) 这篇文章会延续「放烟火 1...

JavaScript Day 1. 基础字串处理

今天是「我的JavaScript日常」的第一天,希望能透过分享与大家一起学习、提升。 在我的学习经验...

Vue出一个展开 / 隐藏 功能

今天练习的主题是用Vue实现列表的展开与隐藏功能 会分为两个范例让大家做演练 范例一 先将isSho...

从 JavaScript 角度学 Python(10) - 容器型别(下)

前言 前一篇我们聊了一些字典有趣的取值方式,所以接下来我想接着继续聊关於字典的部分。 字典取值 在 ...