SPA项目开发之首页导航+左侧菜单

mock.js简介

mock.js官网跳转mock.js官网了解

1.前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

2.Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

3.不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

mock.js的使用

2.1 安装mock.js依赖

   npm install mockjs -D             只在开发环境使用

2.2 引入

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置（使用开发环境）

开发环境

生产环境

2.3 找到入口main.js,使用开发环境需要引入

process.env.MOCK && require('@/mock')

2.4在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，

2.5在mock下的index.js引入安装的mock.js和请求地址
2.6设置所有ajax请求的超时时间

登录跳转主界面示例

3.通过mock.js拦截到引入的请求地址

api地址

3.1mock.js拦截到的api请求地址，登录请求

3.1使用this.$router.push({})实现路由跳转

对象：
this.$router.push({
              path:'AppMain'
            })

4.需要使用到的组件一一挂载到路由以及给到相应的path路径

后台首页AppMain.vue的创建和子组件左侧菜单＋首页导航

4.1AppMain.vue作为父组件，需要引入其他的子组件

// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'

4.2 导入主页样式模块

export default {
		data(){
      return{
        asideClass:'main-aside'
      }
    },
    components:{
      TopNav,LeftNav
    },
    created() {
      this.$root.Bus.$on('collapsed-side',(v)=>{
          this.asideClass = v ? 'main-aside-collapsed': 'main-aside';
      })
    }
	};

4.3为了能让两个子组件使用数据总线，在非父子的组件之间通信，完成左侧菜单折叠。

4.4我们创建一个vue实例嵌套到根vue下

4.5在首页导航设置触发事件
控制样式事件名＋本身的参数
this.$root.Bus.$emit("collapsed-side", this.collapsed);

4.6在左侧菜单设置监听事件

created() {
        this.$root.Bus.$on('collapsed-side',(v)=>{
            this.collapsed = v;
        })
      }

4.7 带上主页的样式触发改变

created() {
      this.$root.Bus.$on('collapsed-side',(v)=>{
          this.asideClass = v ? 'main-aside-collapsed': 'main-aside';
      })
    }

导航栏退出跳转事件

methods:{
 exit(){
          this.$router.push({
            path:'/Login'
          })
        }
        }

效果图