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;*/ /*600px;*/ /*height: 100%;*/ /*margin:0 auto;*/ /*height:400px;*/ height:auto; min-height:500px; /*800px;*/ background:#bbeeeb; margin:0 auto; } #header{ border:1px solid black; /*600px;*/ height:60px; margin:0 auto; margin-bottom:10px; } #header h1{ height:60px; line-height:60px; font-size:16px; text-align:center; } #body{ /*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; /*294px;!*边框也算一个像素*!*/ width: auto; min-width: 300px; height:auto; float:left; margin-bottom:10px; background:lightblue; } #navr{ border:1px solid black; /*150px;*/ /*height:500px;*/ float:right; margin-bottom:10px; background:lightyellow; } #footer{ border:1px solid black; /*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>