<keep-alive>和route怎么使用

<keep-alive>是Vue.js的内置组件，用于缓存组件实例，以避免在组件切换时重复渲染和销毁。一般来说，我们在需要缓存的组件外层用<keep-alive>包裹，在组件内使用keep-alive指令即可。

例如，我们有两个组件A和B，我们希望在切换回组件A时，不需要重新渲染，可以这样使用：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Toggle</button>
  </div>
</template>

<script>
import A from './components/A.vue'
import B from './components/B.vue'

export default {
  data() {
    return {
      currentComponent: 'A'
    }
  },
  components: {
    A,
    B
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'A' ? 'B' : 'A'
    }
  }
}
</script>

在这个例子中，我们使用了<keep-alive>包裹了动态组件，同时在组件内部使用了keep-alive指令，这样在切换组件时，组件A的实例不会被销毁，下次再切换回来时，组件A会直接从缓存中取出，不需要重新渲染。

而route是Vue.js的路由功能，用于实现单页应用（SPA）。我们可以在Vue组件中使用$route对象来获取当前路由信息，例如：

<template>
  <div>
    <p>当前路由：{{ $route.path }}</p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.path)
  }
}
</script>

在这个例子中，我们使用了<router-link>标签来切换路由，同时在组件中使用了$route对象来获取当前路由信息。在mounted生命周期中，我们也可以使用$route对象来获取当前路由信息。