零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：
- keep-alive： 可以保证内部的组件不被销毁
- component： 动态组件 is属性必填
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 5.设置跳转组件选框 -->
<!-- type="radio"单选框 v-model="radio" 将input选中的值与变量radio相互绑定 -->
<input type="radio" v-model="radio" value="home">首页
<input type="radio" v-model="radio" value="user">用户中心
<!-- 6.设置跳转组件缓存 -->
<!-- keep-alive:缓存组件用的标签 -->
<keep-alive>
<!-- component显示组件标签 is="组件名" -->
<component :is="radio"></component>
</keep-alive>
</div>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//2.创建home局部组件
let home = {
template: '<div>首页</div>',
created() { //创建完成后执行的钩子 生命周期函数
alert('home created')
},
destroyed() { //销毁完成后执行的钩子 生命周期函数
alert('home destroy')
}
}
//3.创建user局部组件
let user = {
template: '<div>用户中心</div>',
created() { //在运行后可见created只执行一次 说明该组件被缓存
alert('user created')
},
destroyed() { //在运行后可见destroye不会执行 说明该组件没有被销毁
alert('user destroy')
}
}
//1.创建Vue根组件
let vm = new Vue({
el: '#app',
data: { //定义一个变量 存放组件名
radio: 'home'
},
components: { //4.注册组件
home,
user
}
})
</script>
</body>
</html>
运行结果如下：
