117.(前端)商品管理增加商品布局——点击按钮跳转新页面、如何使用Tabs标签页与Progress进度条

1.效果展示

当点击增加商品按钮时，跳转页面

2.流程

2.1挂载组件——让点击按钮时跳转页面

由于商品的字段过多，使用弹窗的话会很麻烦，所以采用跳转一个新页面进行添加的方式。
首先，在goods下创建一个组件Adds.vue，按照常规步骤挂载路由src/router/index.js（ps：可以用路由地址测试）。
其次，给按钮绑定一个函数，点击时触发，函数内部去push到路由地址即可

2.2挂载组件——代码展示

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Goods  from '../components/goods/Goods.vue'
import Add  from '../components/goods/Add.vue'
// 引入全局样式
import '../assets/css/global.css'


Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/welcome', component: Welcome
      },
      {
        path:'/add_goods', component: Add
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router

<!-- src/components/goods/Goods.vue -->
<el-button type="primary" icon="el-icon-plus" @click="addGoodsPage">添加商品</el-button>

 // 添加商品跳转页面
addGoodsPage(){
            // 点击按钮，跳转到增加的路由地址
            this.$router.push('/add_goods')
        }

2.3使用Tabs 标签页与Progress 进度条

具体操作方式可以查看官网：地址

<!-- src/components/goods/Add.vue -->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>增加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!-- 步骤条 -->
            <el-steps :active="active" finish-status="success">
                <!-- 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。  -->
                <el-step title="基本信息"></el-step>
                <el-step title="商品静态参数"></el-step>
                <el-step title="商品动态参数"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- Tabs标签页 -->
            <el-tabs :tab-position="'left'" style="height: 200px">
                <el-tab-pane label="基本信息">基本信息</el-tab-pane>
                <el-tab-pane label="商品静态参数">商品静态参数</el-tab-pane>
                <el-tab-pane label="商品动态参数">商品动态参数</el-tab-pane>
                <el-tab-pane label="商品图片">商品图片</el-tab-pane>
                <el-tab-pane label="商品内容">定时任务补偿</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0
        }
    }
}
</script>

<style lang="less" scoped>
.el-tabs{
    margin-top: 10px
    ;
}
</style>