component :is动态组件转路由

Question

众所周知，<component :is='id'>渲染的组件，在切换时，url是不会改变的，现在有一个需求是，让compoment可以绑定到url，以便外部可以直接跳转到指定的id的组件，各位有什么好的思路吗

Answer 1

tab 点击切换事件中$router.push到相应路由，component 的 is 属性间接绑定路由属性，比如$route.name。

  <button
    v-for="tab in tabs"
    :key="tab"
    :class="['tab-button', { active: $route.name === tab }]"
    @click="$router.push({name: tab})"
  >{{ tab }}</button>

  <keep-alive>
    <component :is="$route.name" class="tab"></component>
  </keep-alive>

还有一种方法简单粗暴，使用 <router-view> 方案替换，注册相应路由即可。

  <button
    v-for="tab in tabs"
    :key="tab"
    :class="['tab-button', { active: $route.name === tab }]"
    @click="$router.push({name: tab})"
  >{{ tab }}</button>

  <keep-alive>
    <router-view />
  </keep-alive>