98.(前端)分类管理布局显示——子组件挂载的方式与分类管理vue的结构搭建

1.挂载组件

1.1流程

  1. src/components/goods下创建Attribute.vue
  2. 到src/router/index.js引入组件,并创建子组件

1.2代码展示

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Welcome from '../components/Welcome.vue'
import Home from '../components/Home.vue'
import User from '../components/user/User.vue'
import Menu  from '../components/power/Menu.vue'
import Role  from '../components/power/Role.vue'
import Cate  from '../components/goods/Cate.vue'
import Attr  from '../components/goods/Attribute.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: "/user_list", component: User
      },
      {
        path: "/menu_list", component: Menu
      },
      {
        path: "/role_list", component: Role
      },
      {
        path:'/cate_list', component: Cate
      },
      {
        path:'/attr_list', component: Cate
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router



// 根据用户当前是否登录,在访问之前做一个判断
router.beforeEach ((to, from, next) => {
  if (to.path == '/login') return next() // 如果直接访问login界面,那就跳转过去
  // 如果不是直接访问登录界面,看一下他有没有token,如果没有的话,先让他登录,有就想去哪去哪
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})
<!-- src/components/goods/Attribute.vue -->
<template>
    <h1>挂载子组件![在这里插入图片描述](https://img-blog.csdnimg.cn/a81f8804d29b43ecb09106274c89ea21.png)
</h1>
</template>

1.3效果展示

在这里插入图片描述

2.布局分类组件

  1. 使用面包屑
  2. 展示内容
  3. 管理每行内容
  4. 由于分类的数据过多,不可以使用单选的方式,应该使用Cascader 级联选择器
  5. 使用Tabs 标签页,分隔内容上有关联但属于不同类别的数据集合。

3.效果展示

在这里插入图片描述

在这里插入图片描述

4.代码展示

<!-- src/components/goods/Attribute.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-row>
                <el-col>
                    <span>选择商品分类:</span>
                    <el-cascader 
                        :options="cateIdList"
                        :props="{ expandTrigger: 'hover', label:'name', value:'id'}" 
                        clearable 
                        separator=">">
                    </el-cascader>
                </el-col>
            </el-row>
            <!-- Tags展示内容 -->
            <el-row>
                <el-col>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="静态参数" name="first">静态参数</el-tab-pane>
                        <el-tab-pane label="动态参数" name="second">动态参数</el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default{
    data() {
        return {
            cateIdList: []
        }
    },
    created() {
        this.getCateIDList()
    },
    methods:{
        async getCateIDList(){
            const { data: resp } = await this.$axios.get('/api/category_list')
            this.cateIdList = resp.data.data
        }
    }
}
</script>

<style lang="less" scoped>
    .el-tabs{
        margin-top: 5px;
    }
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想成为数据分析师的开发工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值