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

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

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