search

Akryum / vue-router-multi-view

router-view meet v-show meet keep-alive
https://akryum.github.io/vue-router-multi-view/
86 stars 9 forks source link

Add props 'alt-key' for a alternavive key #20

Open znxkznxk1030 opened 5 years ago

znxkznxk1030 commented 5 years ago

Added: alt-key property

As mentioned on #9

A major problem of setting key as parent's path is that can't handle default url like *.

export const routes = [
  { path: '/', name: 'page-a', component: PageA, meta: { exact: true } },
  { path: '/b/:id', name: 'page-b', component: PageB },
  {
    path: '*',
    component: DefaultComponent,
  },
]

on above code, multi-router-view make only one instance when a router push both '/c' and '/d'. but sometimes two different path '/c' and '/d' want two different instances.

Therefore, multi-router-view should have alternative way to set a cache key to handle various business logic.

Usage:

<router-multi-view
      class="wrapper"
      morph="transition-group"
      tag="div"
      name="fade"
      view-name="default"

      :alt-key="$route.path"
    />