29_编程式路由导航
< router-link >实际上是< a >链接 这个可以用来处理 < button >跳转
代码演示
Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">repalce查看</button>
<button @click="back">后退</button>
<button @click="forward">前进</button>
</li>
<hr />
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" },
],
};
},
methods: {
pushShow(m) {
this.$router.push({
path: "/home/message/detail",
query: {
id: m.id,
title: m.title,
},
});
},
replaceShow(m) {
this.$router.replace({
path: "/home/message/detail",
query: {
id: m.id,
title: m.title,
},
});
},
back() {
this.$router.back()
},
forward() {
this.$router.forward()
},
},
};
</script>
缓存路由组件
代码演示
News.vue
<template>
<div>
这里是news内容
<ul>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</div>
</template>
<script>
export default {
name:'News'
}
</script>
Home.vue
<template>
<div>
<h2>我是Home内容</h2>
<ul>
<li>
<router-link to="/home/news">News</router-link>
</li>
<li>
<router-link to="/home/message">Message</router-link>
</li>
</ul>
<!-- 缓存路由组件 组件名-->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
# 缓存多个组件 用数组
<keep-alive :include="['News','Message']">
</keep-alive>
两个新的生命周期钩子
代码演示
解释 用mounted() 和 beforeDestory() 切换组件的时候定时器还在运行
News.vue
<template>
<div>
这里是news内容
<ul>
<li :style="{opacity}">你好啊</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</div>
</template>
<script>
export default {
name:'News',
data() {
return {
opacity:1
}
},
activated(){
console.log("News组件被激活了");
this.timer =setInterval(()=>{
this.opacity -=0.01
if( this.opacity <=0 ){
this.opacity =1
}
},16)
},
deactivated(){
console.log("News组件失活了");
clearInterval(this.timer)
}
}
</script>