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>