1.挂载组件
1.1流程
- src/components/goods下创建Attribute.vue
- 到src/router/index.js引入组件,并创建子组件
1.2代码展示
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 = [
{
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()
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
<template>
<h1>挂载子组件![在这里插入图片描述](https://img-blog.csdnimg.cn/a81f8804d29b43ecb09106274c89ea21.png)
</h1>
</template>
1.3效果展示
2.布局分类组件
- 使用面包屑
- 展示内容
- 管理每行内容
- 由于分类的数据过多,不可以使用单选的方式,应该使用Cascader 级联选择器
- 使用Tabs 标签页,分隔内容上有关联但属于不同类别的数据集合。
3.效果展示
4.代码展示
<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>
<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>