前端基础学习-创建一个简单带有菜单的项目前端

前端基础学习-创建一个简单带有菜单的项目在通过vue-cli自己创建一个project后，创建一个属于自己的项目
（老手勿看，这里只是自己的记录）
创建主页，开发页面样式首页页面代码
首页主要是按照自己想要的方式进行布局，这里我习惯上下（下方主题，左右的布局方式，在左边引入菜单，右边展示页面）

文章图片

页面代码

页面效果

文章图片

这里的页面样式我都是用的内联样式，可以清晰的看到他们的样式
引入菜单路由

> import menuList from '@/router/menuList'export default { name: 'mainIndex', components: { menuList }, data () { return { active: '' } }, computed: { menusList () { return menuList } }, // watch: { //'$route' (to, from) { //console.log(this.$route.path, 'this.$route.path') //} // }, mounted () { console.log(this.menusList, 'menusList') }, methods: { handleSelect (key) { this.$router.push({ name: key }) } } }

这里的active可以先不用管，是设置菜单高亮，后期将会具体说明
下面为引入的menuList，在菜单的地方绑定菜单list变量。

// menuList的目的是为了在首页菜单部分引入，他们直接存在父子关系 export default [ { title: '基础学习', path: '/baseLearn', name: 'baseLearn', children: [ { path: 'formLearn', name: 'formLearn', title: '表单学习' }, { path: 'tableLearn', name: 'tableLearn', title: 'table学习' } ] } ]

在写好菜单之后，将要进行路由的配置，实现点击菜单跳转路由
这里所有需要跳转的页面放在了router-view中
在路由设置时，将其引入首页的children当中，并且引入对应组件，即可实现点击菜单，实现跳转

文章图片

路由配置

import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import routerList from './routerList'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'mainIndex', component: () => import('@/pages/index/mainIndex'), children: [ ...routerList ] } ] })

【前端基础学习-创建一个简单带有菜单的项目】引入的routerList

// routerList的目的是为了引入对应组件，他们直接没有父子的关系 export default [ { path: 'formLearn', name: 'formLearn', title: '表单学习', component: () => import('@/pages/basic/form/index') }, { path: 'tableLearn', name: 'tableLearn', title: '表格学习', component: () => import('@/pages/basic/table/index') } ]

最后的页面效果