在新增功能页面的组件中，怎么使用Vue的<keep-alive>组件来缓存页面状态。这样，在页面跳转后，页面状态不会被销毁，输入框里的值也不会被清空。

在新增功能页面的组件中，使用Vue的`<keep-alive>`组件来缓存页面状态，可以通过以下步骤实现：

1. 在`<keep-alive>`标签内部包含需要缓存的组件，例如：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

这里使用了动态组件，根据`currentComponent`的值来动态渲染不同的组件。

2. 在需要缓存的组件中，使用`<keep-alive>`的`include`属性来指定需要缓存的组件名称，例如：

<template>
  <div>
    <input v-model="name" type="text" />
    <input v-model="description" type="textarea" />
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  name: 'NewFeature',
  data() {
    return {
      name: '',
      description: ''
    }
  },
  methods: {
    save() {
      // 保存功能
      // ...
      
      // 跳转到详情页
      this.$router.push('/detail/' + id)
    }
  },
  activated() {
    // 在页面缓存激活时，清空输入框里的值
    this.name = ''
    this.description = ''
  }
}
</script>

<style scoped>
/* 根据组件名称指定缓存 */
[data-v-xxxxxxx] {
  /* 样式 */
}
</style>

这里指定了组件名称为`NewFeature`，当这个组件被缓存时，输入框里的值不会被清空。

需要注意的是，使用`<keep-alive>`缓存组件时，需要在组件中实现钩子函数`activated()`，在页面缓存激活时执行一些操作，例如清空输入框里的值。

希望这个回答能够帮到您！