vue2动态路由如何实现

在Vue.js中，可以使用内置的`<component>`组件来实现动态组件的渲染。示例代码如下：

<template>
  <div id="app">
    <h1>App.vue根组件</h1>
    <hr />
    <!-- 点击按钮，动态切换组件的按钮 -->
    <button @click="comName = 'Left'">展示Left组件</button>
    <button @click="comName = 'Right'">展示Right组件</button>
    <div class="box">
      <!-- 渲染Left组件和Right组件 -->
      <!-- component标签是vue内置的，作用是组件的占位符 -->
      <!-- is属性的值，表示要渲染的组件的名字 -->
      <!-- is属性的值，应该是组件在components节点下的注册名称 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";

export default {
  data() {
    return {
      // 当前要渲染的组件名称
      comName: "Left"
    };
  },
  methods: {},
  components: {
    Left,
    Right
  }
};
</script>

<style lang="less" scoped>
</style>

在上面的代码中，我们使用了`<component>`标签作为动态组件的占位符。通过`is`属性来指定要渲染的组件的名称，该名称应该是在`components`节点下注册的组件名。通过点击按钮可以动态切换展示`Left`组件和`Right`组件。同时，我们使用了`<keep-alive>`来保持组件的状态。当组件被激活时，只会触发`activated`生命周期，不会触发`created`，因为组件没有重新创建。另外，你可以使用`<keep-alive>`的`include`属性来指定哪些组件要被缓存。