vue 切换路由后, 保存原页面 输入框 内容 (亲测可用!!!)

需求: 在输入框输入信息后, 跳转其它路由再切换回来, 仍可以看到刚刚输入的内容

提需求前 :

样图 :

路由 routes.js 文件 :

路由出口 index.vue 文件 :

完成需求后 :

样图 :

路由 routes.js 文件 :

新增代码 :

keepAlive: true

路由出口 index.vue 文件 :

修改后 路由出口 代码 :

<transition name="fade" mode="out-in">
	<keep-alive>
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
</transition>
<router-view v-if="!$route.meta.keepAlive"></router-view>

小结 :

见划黄线处