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>