您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 路由保活 keep-alive

《和小米一起学Vue.js》— 路由保活 keep-alive

[ 孤狼 | 2023-01-09 11:49:40 | Vue | 1789°C | 0条评论 ]

路由在切换的时候会自动销毁老路由并新建一个新路由来显示。有些时候我们会切换路由(地址),但是希望之前页面的数据不要被清空。这时候就需要用到 Vue 的一个组件 keep-alive 来使我们的路由持续保活。

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{path:'/user',query:{'uid':55}}">User</router-link>
</nav>
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
}
</script>

我们只需要在原来的 <router-view/> 外面包裹上 <keep-alive> 即可实现保活。

<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.query.uid}}</h2>
<div><input type="text"></div>
</div>
</template>


这个时候,不论我们怎么切换路由,都不会清空我们的输入框的内容。


代码下载

下载地址:  密码:g5gy


转载请注明出处:http://gl.paea.cn/n.php?n=205
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索