《项目优化》_小模块优化

1. 某个遍量需要调用方法时，避免后端没有返回数据导致调用方法时报错

   //&& 操作返回的是第一个值为true的对象
   <div >
   		{{props.content && props.content . toFixed(2)}}
   </div>
   

   2. 关于图片缓存问题
      图片在翻页的时候，因为缓存问题显示的图片还是上一页的图片。

   //1、在img标签里面添加一个Key属性，key属性值是图片的url
   <img key="图片路径" src="图片路径">
   //2、在图片路径之后添加一个随机数
   <img :src="图片路径+“？”+“Math.random()”">
   

   3. 路由懒加载
      非懒加载方法：所有的模块都会一起打包到js文件中

   import Login from '@/components/Login'
   

   三种路由懒加载的方法
   【Vue异步组件】

   {
   	path:'/home',
   	name:'home',
   	component: resolve => require(['@/components/about'],resolve)
   }
   

   【import方法，指定webpackChunkName,将webpackChunkName一样的路由打包成一个js模块】

   // 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
   //  const Home = () => import('@/components/home')
   // const Index = () => import('@/components/index')
   // const About = () => import('@/components/about') 
   // 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
   const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
   const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
   
   //使用路由
   {
   	path:'/about',
   	component:About
   },{
   	path:'index',
   	conponent:Index
   }
   

   【使用webpack的方法】

   /* 组件懒加载方案三: webpack提供的require.ensure() */
   {
     path: '/home',
     name: 'home',
     component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
   }, {
     path: '/index',
     name: 'Index',
     component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
   },