关于前端:路由组件深拷贝的应用

多个路由指向同一个组件，组件会被复用, 切换页面时, 页面不会从新渲染

import pageComponent from '@/components/pageComponent'
const routes = [// 门路的配置 每个门路选项都是一个对象
{
  path: '/home',
  name: 'Home',
  component: pageComponent
},
{
  path: '/about',
  name: 'About',
  component: pageComponent
}
]

如果某些中央须要扭转路由时进行刷新或缓存操作，能够对组件进行深拷贝后注册路由，这时候不同路由指向的是 雷同然而不相等 的组件，路由切换时也会对应的切换组件

/**
 * 简略版深拷贝，只实用于对象
 * @param {Object} source
 * @returns {Object}
 */
export function deepClone(source) {if (!source && typeof source !== 'object') {throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {if (source[keys] && typeof source[keys] === 'object') {targetObj[keys] = deepClone(source[keys])
    } else {targetObj[keys] = source[keys]
    }
  })
  return targetObj
}


import pageComponent from '@/components/pageComponent'
const newPageComponent = deepClone(pageComponent)
const routes = [// 门路的配置 每个门路选项都是一个对象
{
  path: '/home',
  name: 'Home',
  component: pageComponent
},
{
  path: '/about',
  name: 'About',
  component: newPageComponent
}
]