refactor: refactor router-view + fix keep-alive route guard this context

[yyx990803]

• Refactored <router-view> implementation
• Upgrading to vue@3.0.0-beta.18

  • fixes navigation guard this when route component is inside <keep-alive>

  • passing component vnode via <router-view> slot gets rid of the need to pass props, so the user no longer needs to bind it. This simplifies <router-view> slot usage with <transition>/<keep-alive> to:

    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    RFC needs to be updated accordingly.

  • also added a warning when detecting old usage (<router-view> directly inside <transition>/<keep-alive>)

[yyx990803]

Note here we are passing component, which is a vnode, to the slot as Component. Changes in vue@3.0.0-beta.18 allows <component :is=""> and h to accept an existing vnode which makes it possible.

[posva]

This is great! It's so much easier than what I was doing in the branch feat/keep-alive 😭
I'm going to add a few tests and this should bring us very close to beta 🚀

[posva]

I think here we could just use a ternary:

Suggested change

	(slots.default && slots.default({ Component: component })) || component
	slots.default ? slots.default({ Component: component }) : component

[posva]

Aah, I didn't see the parentheses correctly. But I think it would make more sense to use the slot if there is one without falling back to component. This way the user could hide it if they wanted to

[yyx990803]

Yeah I just followed the original logic. We should probably use a ternary indeed.