标签：Vue Test7 title route alive keep vue meta import

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。