crossrouter v0.0.2

cross-router（only support vue3）

倘若你希望你的组件在不同的地方使用，在切换的时候保存组件的状态并且拥有平滑的过渡动画，不妨看看这个~

实现思路

在传统的wen应用中，切换页面，意味着组件的卸载和重新挂载，组件的生命周期会执行，内部的状态也会丢失 但是用FLIP的思路的话，我们页面中的组件，只是一个代理组件，用于接收一些位置信息和一些props。而真正要渲染的组件，其实是用绝对定位悬浮在整个App下的，根据代理组件接收到的位置和样式信息，将悬浮的真正组件通过补间动画的形式移动到对应的位置。 而这不就和FLIP没有区别了吗？不不不，等到补间动画结束之后，我们可以通过vue中teleport将组件传送到对应的代理组件中

使用方法

npm i cross-router

将crossroutercarrier组件放入App.vue文件下

 <template>
  <header>
      <CrossRouterCarrier/>
  </header> 
  <RouterView />
</template>

DEMO

倘若我们有这些图片数据需要共享

export const images = [
  "https://img2.baidu.com/it/u=2939429593,2975375978&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  "https://img2.baidu.com/it/u=1504217460,303290927&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  "https://img1.baidu.com/it/u=3949630743,204453909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=846",
  "https://img1.baidu.com/it/u=1051747090,2377710771&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=614"
]

这里我们使用routerlink将其包裹是为了点击后进行路由跳转，再用CrossRouterProxy包裹我们准备共享状态的组件（这里是TheImage组件），并传入对应的port和该路由下的一些样式。 注意：port必须是唯一值，为了确保与另一个路由上的组件进行匹配

 <router-link v-for="img,index of images" :to="`/${index}`" >
    <CrossRouterProxy
        :port="String(index)"
        :style="{'width':size + 10+'px','height': size + 10 + 'px','transition':'all 650ms ease 0s'}" 
        > 
          <TheImage 
          :style="{'border-radius':'10px'}"
          :src="img">
          </TheImage>
     </CrossRouterProxy>
</router-link>

在另一个路由上，我们使用 相同的 port ID 让 Starport 得以进行匹配。

<CrossRouterProxy
   :style="{'width': '200px', 'height': '200px' ,'transition':'all 650ms ease 0s'}"
   :port="no"
   >
       <TheImage 
       :style="{'border-radius': '50%'}"
       :src="images[+no]">
       </TheImage>
</CrossRouterProxy>

展示效果如下