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>