路由学习（下）-优快云博客

方便大家的学习，在这附上路由学习（上）的学习链接：

路由学习之基本使用（上）_实习期小潘的博客-优快云博客https://blog.youkuaiyun.com/m0_60264901/article/details/124025175?spm=1001.2014.3001.5501

通过基础了解，之后我们就能够深入学习！

今天就接着所学内容，趁热打铁！

编程式路由导航

含义：可以简单理解为不借助router-link的路由导航叫编程式路由导航。

<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) //go()中的数字就是前进的步数，负数的话就是后退
			}
		},
	}
</script>

this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

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

<keep-alive include="News"> //这里面写的是要缓存的组件名
<router-view></router-view> //要注意你想要缓存的路由组件展示在哪个里面
</keep-alive>

比如说本案例中，News.vue这个组件是放在Home.vue 组件里面的

<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']"> -->
				
			<!-- 缓存一个路由组件 -->
			<!-- include里面缓存的是 组件名 -->
			<keep-alive include="News">
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

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

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

activated(){ }路由组件被激活时触发

deactivated(){ }路由组件失活时触发

$nextTick(function( ){ }

activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},

this.$nextTick(function(){
    this.$refs.inputTitle.focus()
})

//这三个就是之前未提及到的三个钩子

总结

以上就是所学内容啦！