vuejs 一个项目总结

1.双向绑定也不是所有的属性都是需要的，首先前端分两个大类，一个展示数据，一个录入数据；
那么展示数据的那部分，双向绑定就不需要，而我一开始钻进去写前端的时候呢，从复制粘贴一路下来，写了很多的无用代码，且浪费时间，有必要双向绑定的，状态判断，监听事件的属性等等；
那么录入数据的部分呢，有必要双向绑定的数据，下拉框select ，单选框lable 等需要设置默认值的属性，鉴于属性太多且杂，可以直接把录入的数据都做成双向绑定，优点是所有的值都有默认值，不用担心后续的问题，缺点是属性太多，浪费时间。这个页面就是写了整整一页的属性，录入东西太多。

image.png

2.缓存
官方文档给出，在设置路由的时候给值 noCache: true if true, the page will no be cached(default is false) 离开路由的时候清空缓存

/* Router Modules */
// import componentsRouter from './modules/components'
// import chartsRouter from './modules/charts'
// import tableRouter from './modules/table'
// import nestedRouter from './modules/nested'

/** note: Submenu only appear when children.length>=1
 *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 **/

/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
*                                if not set alwaysShow, only more than one route under the children
*                                it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    roles: ['admin','editor']    will control the page roles (you can set multiple roles)
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    noCache: true                if true, the page will no be cached(default is false)
    breadcrumb: false            if false, the item will hidden in breadcrumb(default is true)
  }
**/

image.png

3. 页面跳转-url传值
   如果只有很少的部分可以用url后接?xxx 方式去传值，而要传json数据的话最好不要，若json数据太多，url传值会出现莫名的问题，改session存储接收的方式。

handleUpdate(row) {
      row = escape(JSON.stringify(row));
      this.$router.push({
        path: "/estate/addestate",
        query: { row, row }
      });
    },

  created() {
    if (this.$route.query.row) {
      var row = JSON.parse(unescape(this.$route.query.row))
      this.temp = Object.assign(this.temp, row)
    }
  },

      sessionStorage.setItem('row', JSON.stringify(row))
//在另一个页面定义一个变量去接收，之后并清除session
   const rows = JSON.parse(sessionStorage.getItem('row'))
    sessionStorage.removeItem('row')

4.json解析问题

5. 样式问题
   这个问题是在vue框架下设置了多级菜单后，对table标签下设置了宽度，因为table标签下显示的列太多，设置width：100%没有效果，如果直接把width：1000px写死的话，不同分辨率显示的样式不一致，后来是这么解决的，获取浏览器当前的宽度，再把当前的宽度赋值给width。

<el-table :style="myWidth " >
myWidth: {width: document.body.scrollWidth + 'px'},