一、启动
npm install
npm run dev
二、项目结构
三、新增页面
在views文件夹下新增vue页面文件或者【文件夹order->在文件夹内新增vue页面】,如index.vue,模板代码如下
<template>
<div class="app-container a">
全部订单
</div>
</template>
<script>
export default {
name:"a"
}
</script>
<style lang="scss" scoped>
</style>
四、在Router->index.js文件中新增路由
情况一:只有一个主标题
{
path: '',
component: Layout,
redirect: 'index',
children: [
{
path: 'index',
component: (resolve) => require(['@/views/index'], resolve),
name: '我的工作台',
meta: { title: '我的工作台', icon: 'dashboard', noCache: true, affix: true }
}
]
},
情况二:有下拉,展开选项只显示1个子标题
{
path: '/order',
component: Layout,
hidden: false,
redirect: 'index',
alwaysShow:true,
meta: { title: '订单管理', icon: 'user' },
children: [
{
path: 'index',
component: (resolve) => require(['@/views/order/index'], resolve),
name: '全部订单',
meta: { title: '全部订单', icon: 'dashboard' }
},
]
},
path后面是文件夹名字;
alwaysshow:true用来控制只展示下拉只有一个子菜单的情况,不加这句话,不显示下拉效果,只展示下拉的选项,不显示标题,没有折叠效果。
第一个meta的内容是主标题
children里的内容是下拉的内容,里面的name和title要对应,require是页面路径
情况三:有下拉,展开选项有多个子标题
{
path: '/quote',
component: Layout,
hidden: false,
redirect: 'noredirect',
meta: { title: '报价管理', icon: 'user' },
children: [
{
path: 'quote',
component: (resolve) => require(['@/views/quote/quote'], resolve),
name: '待报价',
meta: { title: '待报价', icon: 'user' }
},
{
path: 'quoted',
component: (resolve) => require(['@/views/quote/quoted'], resolve),
name: '已报价',
meta: { title: '已报价', icon: 'user' }
}
]
},
![](https://i-blog.csdnimg.cn/blog_migrate/7c8a12eda626050ee3b993d3bc2f32df.png)
五:访问
xxxxx/文件夹名/文件名