- 这节课来实现新增商品，起首是点击【添加商品】按钮实现跳转页面，在界说点击方法跳转页面之前，要先新建一个页面addShop
- 在【src/views/shopModel】文件夹下，新建一个【addShop】文件夹，在文件夹内新建【index.vue】
- 在【index.vue】内敲快捷键vbase（条件是你的vscode已经安装了Vue VSCode Snippets插件），快速生成vue组件底子布局
- 然后就是新建页面路由
- 打开【src/router/index.js】，在【商品列表】路由下面，和其同级，新建一个【新增商品】的页面路由
children: [ { path: '/shopModel/shopList', name: 'ShopList', component: () => import('@/views/shopModel/shopList/index'),//引入的是页面的路径，这是一种懒加载情势 meta: { title: '商品列表', icon: 'table' } }, { path: '/shopModel/addShop', name: 'AddShop', hidden: true,//在左侧隐蔽，不会表现在左侧 component: () => import('@/views/shopModel/addShop/index'),//引入的是页面的路径，这是一种懒加载情势 meta: { title: '新增商品', icon: 'table' } }, ]
- 然后找到【添加商品】按钮，界说一个点击变乱@click="handleAdd"
- 在然后在methods里映射这个方法，然后跳转到新增商品的页面
handleAdd(){ this.$router.push("/shopModel/addShop")},
- 起首是该页面也是基于在el-card卡片上开发的，最外层先包裹一层el-card
<template> <div</blockquote>
- 是由于少传了cover字段，下面来学习下怎样封装一个图片上传的组件，利用七牛云js插件直传到七牛云图片堆栈
接下章 |
