路由组件深拷贝的应用

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

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
}
]