Vue keep-alive
作者：互联网
Test7.vue
<template>
<div id="test7_body">
<div id="header"><h1>上标题</h1></div>
<div id="body">
<div id="navl">
左导航
<div>
Test7
<div>
<router-link :to="{path:'/test7/test7-1'}">Test7_1</router-link>
<br/>
<router-link :to="{path:'/test7/test7-2'}">Test7_2</router-link>
</div>
</div>
</div>
<div id="main">
中内容
{{$route.meta.keepAlive}}
<!-- vue2 写法 -->
<!-- <keep-alive>-->
<!-- <router-view></router-view>-->
<!-- </keep-alive>-->
<!-- vue3 写法 -->
<router-view v-slot="{Component}">
<!-- <keep-alive :exclude="['Test7_1']">-->
<!-- <keep-alive :include="['Test7_2']">-->
<keep-alive>
<component :is="Component"
v-if="$route.meta.keepAlive"
:key="$route.path">
</component>
</keep-alive>
<component :is="Component"
v-if="!$route.meta.keepAlive"
:key="$route.path">
</component>
</router-view>
</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>下版权</p></div>
</div>
</template>
<script>
// import {useRouter} from 'vue-router';
// import {useRoute} from 'vue-router';
export default {
name: 'Test7',
setup(){
// let route = useRoute();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS Document */
/**{*/
/* margin:0;*/
/* padding:0;*/
/*}*/
/*body{*/
/* margin:10px;*/
/*}*/
#test7_body{
margin:0;
padding:0;
/*margin:10px;*/
/*width:600px;*/
/*height: 100%;*/
/*margin:0 auto;*/
/*height:400px;*/
height:auto;
min-height:500px;
/*width:800px;*/
background:#bbeeeb;
margin:0 auto;
}
#header{
border:1px solid black;
/*width:600px;*/
height:60px;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
height:60px;
line-height:60px;
font-size:16px;
text-align:center;
}
#body{
/*width:600px;*/
margin:0 auto;
}
#navl{
border:1px solid black;
width:150px;
height:auto;
float:left;
margin-bottom:10px;
background:lightcyan;
overflow: auto;
}
#main{
border:1px solid black;
/*width:294px;!*边框也算一个像素*!*/
width: auto;
min-width: 300px;
height:auto;
float:left;
margin-bottom:10px;
background:lightblue;
}
#navr{
border:1px solid black;
/*width:150px;*/
/*height:500px;*/
float:right;
margin-bottom:10px;
background:lightyellow;
}
#footer{
border:1px solid black;
/*width:600px;*/
height:60px;
line-height:60px;
margin:0 auto;
text-align:center;
clear:both;
}
</style>
index.js
//引入
import { createRouter, createWebHashHistory } from 'vue-router';
// import Home from '../views/Home.vue'
// import Test3 from '../views/Test3.vue'
//路由懒加载
const Home = () => import('../views/Home.vue');
const Test3 = () => import('../views/Test3.vue');
const Test4 = () => import('../views/Test4.vue');
const Test4_1 = () => import("../components/Test4-1");
const Test4_2 = () => import("../components/Test4-2");
const Test5 = () => import('../views/Test5.vue');
const Test6 = () => import('../views/Test6.vue');
const Test7 = () => import('../views/Test7.vue');
const Test7_1 = () => import("../components/Test7-1");
const Test7_2 = () => import("../components/Test7-2");
//创建路由对象
const routes = [
{
path: '/',
meta:{title:'home'},
name: 'Home',
component: Home
},
//路由重定向
{
path: '/home',
meta:{title:'home'},
redirect:'/'
},
{
path: '/about',
meta:{title:'about'},
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test1_bak',
meta:{title:'Vue2示例'},
name: 'Test1_bak',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test1_bak.vue')
},
{
path: '/test1',
meta:{title:'Vue3工程示例'},
name: 'Test1',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test1.vue')
},
{
path: '/test2',
meta:{title:'js实现路由跳转'},
name: 'Test2',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test2.vue')
},
{
path: '/test3/:id',
meta:{title:'动态路由'},
name: 'Test3',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test3
},
{
path: '/test4',
redirect: '/test4/test4-1',
meta:{title:'路由嵌套'},
name: 'Test4',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test4,
children:[
{path:'test4-1',component:Test4_1},
{path:'test4-2',component:Test4_2}
]
},
{
path: '/test5',
meta:{title:'参数传递'},
name: 'Test5',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test5
},
{
path: '/test6',
meta:{title:'前置守卫'},
name: 'Test6',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test6,
//独享守卫
beforeEach:(to,from,next)=>{
// console.log("from:"+from);
// console.log("to:"+to);
// document.title = to.meta.title;
//放行
next();
}
},{
path: '/test7',
redirect: '/test7/test7-1',
meta:{title:'keep-alive',keepAlive:true},
name: 'Test7',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Test7,
children:[
{
path:'test7-1',
meta:{title:'keep-alive',keepAlive:false},
name:'Test7_1',
component:Test7_1
},
{
path:'test7-2',
meta:{title:'keep-alive',keepAlive:true},
name:'Test7_2',
component:Test7_2
}
]
},
]
const router = createRouter({
history: createWebHashHistory(),
linkActiveClass:'current',
routes
})
//全局路由的前置守卫
router.beforeEach(
(
to,
from,
next
) => {
// console.log("from:"+from);
// console.log("to:"+to);
// document.title = to.meta.title;
//放行
next();
}
)
//全局路由的后置守卫
router.afterEach(
(
to//,
// from
) => {
// console.log("from:"+from);
// console.log("to:"+to);
document.title = to.meta.title;
})
//导出路由对象
export default router
Test7-1.vue
<template>
<div id="test7-1">
Test7-1
</div>
</template>
<script>
import {onMounted,onUnmounted,onActivated,onDeactivated} from 'vue';
export default {
name: 'Test7-1',
setup(){
onMounted(()=>{
console.log("onMounted");
})
onUnmounted(()=>{
console.log("onUnmounted");
})
onActivated(()=>{
console.log("onActivated");
})
onDeactivated(()=>{
console.log("onDeactivated");
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
width: 450px;
height: 600px;
background-color: skyblue;
}
</style>
Test7-2.vue
<template>
<div id="test7-2">
Test7-2
<input type="text">
</div>
</template>
<script>
import {onMounted,onUnmounted,onActivated,onDeactivated} from 'vue';
export default {
name: 'Test7-2',
setup(){
onMounted(()=>{
console.log("onMounted");
})
onUnmounted(()=>{
console.log("onUnmounted");
})
onActivated(()=>{
console.log("onActivated");
})
onDeactivated(()=>{
console.log("onDeactivated");
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
width: 450px;
height: 600px;
background-color: skyblue;
}
</style>
标签：Vue,Test7,title,route,alive,keep,vue,meta,import 来源： https://www.cnblogs.com/mingforyou/p/15234096.html