vue常用路由router之“缓存路由组件、后退、前进、任意跳转”

最新推荐文章于 2024-09-19 20:18:11 发布

空投在我怀里

最新推荐文章于 2024-09-19 20:18:11 发布

阅读量881

点赞数

分类专栏： vue常用文章标签： vue.js 前端 javascript router vue

本文链接：https://blog.csdn.net/wrk2466836002/article/details/123407634

版权

vue常用专栏收录该内容

32 篇文章 2 订阅

订阅专栏

本文介绍了Vue Router中`<keep-alive>`组件的使用，其主要目的是保持路由组件的状态，防止在切换路由时被销毁。通过`<keep-alive>`包裹`<router-view>`，可以实现组件的缓存。示例代码展示了如何指定缓存的组件，例如`News`组件。案例2中，当用户在`News`和`Message`之间切换时，`News`组件的状态将被保留。

摘要由CSDN通过智能技术生成

作用：让不展示的路由组件保持挂载，不被销毁。

具体编码：

<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

案列展示：

1.案列1：

<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header">
			<h2>Vue Router Demo</h2>
			<button @click="back">后退</button>
			<button @click="forward">前进</button>
			<button @click="test">测试一下go</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Banner',
		methods: {
			back(){
				this.$router.back()
				// console.log(this.$router)
			},
			forward(){
				this.$router.forward()
			},
			test(){
				this.$router.go(3)
			}
		},
	}
</script>

案列2：

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<!-- 缓存多个路由组件 -->
			<!-- <keep-alive :include="['News','Message']"> -->
				
			<!-- 缓存一个路由组件 -->
			<keep-alive include="News">
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
	
	}
</script>

案列2效果图：