Vue.js案例 —— 课程管理系统二

一、项目页面容器布局、侧边栏路由跳转

使用Element-UI的Container布局容器布局，NavMenu渲染侧边栏

在main.js中引入重置样式，消除默认样式

import './assets/scss/reset.scss'

安装element-ui

npm i element-ui  -S

在main.js中引入element-ui

  import ElementUI from 'element-ui';	//引入element-ui
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);

二、实现面包屑导航功能

需求：点击左侧菜单的时候，把当前点击的菜单的这个数据添加到面包屑

思路：通过Vuex共享数据实现

在vuex中创建当前菜单对象currentMenu:null，点击左侧菜单的时候把当前点击的菜单的这个数据存放到vuex中的currentMenu。面包屑的渲染数据就直接使用Vuex中的currentMenu。

由于页面效果，首页它是一直存在的，需要判断当前菜单是否是首页，如果不是就进行存储，否则不存储。

state: {
   
	//当前菜单
	currentMenu: null
},
mutations: {
   
	selectMenu (state,val