您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue的keep-alive
发布时间：2020-03-08 18:21:56编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var blog={
data:function(){
return{}
},
template:`<div>blog组件</div>`
};
var home={
data:function(){
return{
color:"red"
}
},
template:`<div><button @click="hclick">测试</button></div>`,
created(){
console.log('home组件created');
},
mounted(){
console.log('home组件mounted');
},
destroyed(){
console.log('home组件被销毁了')
},
methods:{
hclick:function(e){
//在home组件中若触发了该方法，则按钮的文字变成红色，但是此时若又离开home组件比如去了blog组件后再次回到home组件中则home组件中的按钮上面的颜色又恢复到了之前的初始化颜色
//即组件切换不会自动保存切换前组件的数据
e.target.style.color = 'red';
//然而当router-view在keep-alive中则组件数据在切换过程中仍然可以保存的
}
}
};
var router=new VueRouter({
routes:[
{
path:"/home",
name:"home",
component:home
},
{
path:"/blog",
name:"blog",
component:blog
}
]
});
var App = {
template:`<div class='app'>
<router-link :to ="{name:'home'}">首页</router-link>
<router-link :to ="{name:'blog'}">blog</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>`,
methods:{}
};
new Vue({
el: '#app',
template: `<App />`,
components:{App},
router:router
});
</script>
</body>
</html>
关键字词：vue,keep-alive