vue后台管理系统遇到的注意事项以及总结

const userCenter = resolve => require([‘@/pages/usercenter‘], resolve);
const userInfo = resolve => require([‘@/pages/usercenter/userInfo‘], resolve);
const resetPwd = resolve => require([‘@/pages/usercenter/resetPwd‘], resolve);

2.require.ensure commomjs规范

//预加载 懒执行
require.ensure([‘./mod.js‘], function(require){//这里数组里是要预加载的模块，不写不会先下载 
    var mod = require(‘./mod.js‘);
    mod.show();
});

 proxyTable可以解决我们在vue项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题，有的时候生产环境上也需要处理跨域问题，这个时候 proxyTable就不管用咯，我们公司目前用的nginx代理

//传参: 
this.$router.push({
        path:‘/xxx‘,
        query:{
          id:id
        }
      })
  
//接收参数:
this.$route.query.id

2.params方式传参和接收参数
注意:params传参，push里面只能是 name:‘xxxx‘,不能是path:‘/xxx‘,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

//传参: 
this.$router.push({
        name:‘xxx‘,
        params:{
          id:id
        }
      })
  
//接收参数:
this.$route.params.id

  watch: {
    $route: function() {
      var tech_type = this.$route.params.tech_type;
     //执行一些操作
    }
  },

当有一些数据需要随着另外一些数据变化时，建议使用computed。
当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watch

<template>
  <div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    <!--这里是其他的代码-->
  </div>
</template>

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)
export default new Router({
    {//home会被缓存
        path:"/home",
        component:home,
        meta:{keepAlive: true}
    }
    {//hello不会被缓存
        path:"/hello",
        component:hello,
        meta:{keepAlive: false}
    }
})

<!-- HTML --> 
<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

扩展：