Vue Router（二）
目录
一、嵌套路由
1、路由定义
2、代码例子
3、重定向
二、懒加载
1、缘由
2、代码例子
三、导航守卫
1、全局前置守卫
2、全局后置守卫
3、meta元信息
四、生命周期
1、解释
2、执行顺序
3、例子
五、keep-alive组件缓存（保活）
1、介绍
2、属性
3、代码例子
一、嵌套路由
1、路由定义
（1）通过路由配置，定义好组件在路由层面映射的嵌套层级，使用children定义子路由
（2）注意：子路由中的path不以/开头，若写了/则会提升为一级路由
2、代码例子
（1）App.vue文件
<h1><router-link to="/home">主页</router-link> |<router-link to="/news">新闻</router-link>
</h1>
<router-view />（2）router文件夹下index.js文件
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import Hot from "../views/news/hotPage.vue"
import Tnews from "../views/news/TnewsPage.vue"
import News from "../views/news/NewsPage.vue"Vue.use(VueRouter);const routes = [{path: "/",name: "home",component: HomeView,},{path: "/news",name: "news",component: News,children: [{path: "hot", //注意路径没有/component: Hot,},{path: "tnews", //注意路径没有/component: Tnews,},],},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;
NewsPage.vue文件
<nav><router-link to="/news/hot">热点新闻</router-link> | <router-link to="/news/tnews">国际新闻</router-link>
</nav>
<router-view />3、重定向
routes的每一层都可以重定向
const routes = [{path: "/",redirect:"Home",//对应component，注意Home要引号引起来},{path: "/news",name: "news",component: News,children:[{path:'',redirect:"Hot",},{path:'hot',component:Hot,},{path:'tnews',component:Tnews,},],},
];二、懒加载
1、缘由
①问题：当每个组件都在定义路由前import ，打包构建项目时，js包会变得非常大，影响页面加载
②解决：把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应组件，会更高效
③格式：()=>import("vue文件路径")
2、代码例子
const routes = [{path: "/",redirect: { name: "Home" }, //重定向也要改格式},{path: "/home",name: "Home",component: () => import("@/views/HomePage.vue"),},
];三、导航守卫
作用：通过跳转或取消的方式守卫导航，有些页面需要权限校验才能进入
多种方式：全局，单个路由独享，组件级
1、全局前置守卫
（1）场景：路由开始跳转前（未进行跳转时），需要在回到函数中手动调用next()，放行路由
（2）格式
router.beforeEach((to,from,next)=>{})①to：即将要进入的目标路由对象
②from：当前导航要离开的路由
③next('/')：一定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数
- next()：放行路由跳转，会跳转到原定目标页面
- next(false)：中断当前的导航，如果浏览器的URL改变了，那么URL会重置到from路由对应的地址
- next('/')、next({ path: '/' })：路由重定向，可以向next传递任意用在<router-link>的【to属性值】或router.push的选项
（3）注意
必须确保next函数在任何给定的导航守卫中都被严格调用一次
①代码例一
router.beforEach((to,form,next)=>{//如果未登录且目标不是登录页，则重定向到登录页，且return掉函数if(to.name !== 'Login' && !isAuthenticated) return next({name:'Login'})//放行路由next()
})②代码例二
router.beforeEach((to,from,next)=>{console.log("to",to);console.log(from);next()
})2、全局后置守卫
（1）场景：进入页面后的守卫，与前置守卫不同的是，没有next函数，因此不会改变导航
（2）格式
router.afterEach((to, from) => {// ...
})①to：当前导航进入的目标路由对象
②from：当前导航正要离开的路由
3、meta元信息
说明：浏览器每个页面的标题
{path:'/home',name:"Home",meta:{//元信息title:'主页'},component:()=>import("@/views/HomePage.vue"),
},四、生命周期
图解生命周期
1、解释
（1）beforeCreate()
周期节点：组件实例被创建之初，组件的属性生效之前
注意：此时无实例，无dom渲染
创建实例之前执行的钩子事件
（2）created()
周期节点：组件实例已经完全创建，属性也绑定，但真实dom还没有生成
注意：此时仅能访问到实例数据，如：dada、method等
（3）beforeMount()
周期节点：DOM刚要渲染
注意：此时仅能访问到实例数据，如：data、method等
（4）mounted()
周期节点：DOM渲染结束
注意：此时能访问到实例数据和页面上的DOM
（5）beforeUpdate()
周期节点：组件数据更新之前，DOM未重新渲染
（6）update()
周期节点：组件数据更新之前，DOM已重新渲染
（7）activated()
【keep-alive专属】，缓存的组件被激活时，钩子函数
（8）deactivated()
【keep-alive专属】，缓存的组件未激活时，钩子函数
（9）beforeDestroy()
周期节点：组件实例销毁前
（10）destroyed()
周期节点：组件销毁后
2、执行顺序
3、例子
created () {console.log('新闻页面创建');
},
destroyed () {console.log('新闻页面销毁');
},五、keep-alive组件缓存（保活）
1、介绍
使用<router-view>切换页面，组件会被摧毁并经历完整的生命周期
但是有时需要组件数据能够保存，而不是每次进入就重新获取数据进行页面渲染
<keep-alive><router-view />
</keep-alive>2、属性
①include：字符串或正则表达式，名称匹配的组件会被缓存。
②exclude：字符串或正则表达式，名称匹配的组件都不会被缓存。
③max： 数字，最多可以缓存多少组件实例。
<keep-alive include="HomePage"><router-view />
</keep-alive>3、代码例子
<!-- Home.vue -->
<template>
<div><nav><router-link to="/home/index">首页</router-link><router-link to="/home/mine">我的</router-link></nav><!-- 失活的组件将会被缓存！--><keep-alive><router-view /></keep-alive>
</div>
</template>