1200字范文 > 路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7

路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7

时间：2023-09-20 15:08:03

# 路由的导航守卫

别名：

导航守卫路由守卫路由钩子路由拦截

作用： — 类似【保安】

守卫路由进举例：携带数据进出举例：事情完成才能出

导航守卫一共有三种形式【项目三选一】

A: 全局导航守卫

针对的整个项目，也就是管理或是监听整个项目

全局前置守卫 router.beforeEach(fn) fn 中有三个参数 to：目标路由from：当前路由next：它是一个拦截，表示是否允许通过 true/false/’/login’/{ name: ‘login’}/ vm => {} 使用场景：当我们本地存储/cookie 中有 token，那我们就自动跳转 /mine 全局的解析守卫在 2.5.0+ 你可以用router.beforeResolve注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。必须保证整个项目的守卫和异步路由组件解析完成全局的后置守卫 router.afterEach(to , from ) 可以做一些用户友好提示

B: 路由独享守卫 ·

路由配置选项中的一个

写在路由表中的守卫钩子针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的做路由拦截案例：权限验证数据库：用户组普通用户管理员超级管理员我们登录式，后台会返回给我们 info 信息，通过信息来判断它是哪个类型用户

C: 组件内守卫【王者】

当前组件

组件内的前置守卫 beforeRouteEnter((to,from,next)=>{}) 导航进入组件时，调用this 是访问不到的，如果非要访问 this ,必须通过 next(vm=>{})访问因为组件此时没有创建，所以没有 this案例：数据预载（进入组件前就获得数据）

next(vm => { //vm 指的就是组件

const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys

vm.$set(vm.category,‘categorys’,result)

}) 组件内的后置守卫当离开组件时，调用this 是可以访问到案例：注册/内容提交，用户交互提示组件内的更新守卫（路由传参和路由的接参）在当前路由改变，但是该组件被复用时调用举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 this

功能：导航守卫可以监听路由变化情况，做路由跳转拦截

名词

前置：要进入当前路由 — 老师进入教室前后置：要离开当前路由 — 老师离开教室

关于 next 的使用

next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由next( false ) 表示不通过，表示从当前路由跳转不到目标路由next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由next(’/login’) 等价于 next({path:’/login’,params,query})next( fn ) 数据预载

next( vm => {})

业务：当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页

router.beforeEach((to, from, next) => {// next() // 默认true// next( false )// next()// 判断用户是否登录，我们找token值 cookie localStorageconst token = localStorage.getItem("token");if (to.path === "/home") {next();}if (to.path == "/aa") {next();}if (to.path === "/mine/login") {if (token) {// 条件成立，那么我们就可以进行页面跳转了next("/home");} else {// 条件不成立，留在当前页面next();}} else {next(false);}});

全局导航守卫案例

在 src > router >global-config.js 设置全局路由配置

import router from "./index";// 书写全局导航守卫// 1. 全局导航守卫 - 前置守卫 - 管理的是路由的进入router.beforeEach((to, from, next) => {// to表示目标路径 - 我想进哪里// from表示当前路径 - 我现在所处的路径// next 表示 from 到 to 的连接，它可以控制是否允许进入// 里面什么都不写表示不允许通过// next() 表示允许通过默认实参为true// next() == next( true )// next( true )// next( false ) 表示不允许通过// next( false )/* 参数输出 */// console.log('to',to)// console.log('from',from)// 写一个自动的跳转// 当我们登陆了之后，我们前端要将后端给的token值存储起来，然后我们通过判断token是否存在，来进入项目const token = localStorage.getItem("token");// if ( token ) { //路由鉴权////表示token存在//next()// } else {//next( false )// }// 如果token不存在，那么我们自动跳转登录页面，然后让用户登录，来获得token值if (to.path == "/home") {next();}if (to.path == "/category") {next();}if (!token) {// next( 路由路径 ) 可以跳转某一个路由/* 以下这么些会出现一个问题就是死循环 */// console.log( 1 )// next('/mine/login')// next()/* 所以要想不出现死循环，我们要加判断条件思考：需要打破这个死循环的条件这样，用户进入哪一个页面可以由我们来控制 */switch (to.path) {case "/home":next("/mine/login");next();break;case "/category":next("/mine/login");next();break;case "/shopcar":next("/mine/login");next();break;default:break;}}next();});// 2. 后置守卫 - 表示的离开router.afterEach((to, from) => {//没有next参数，那就没有拦截作用，它可以提示作用if (to.path == "/home") {alert("您是否要今天入首页？");}});

router.beforeEach((to, from, next) => {// to and from are both route objects.must call `next`.// if (to.path === '/mine') return next()// const tokenStr = window.sessionStorage.getItem('token')// if (!tokenStr) return next('/mine')// next()const token = window.sessionStorage.getItem("token");if (!token) {if (to.path === "/home/zhy") {next("/mine");} else {next();}} else {next();}});router.afterEach((to, from) => {// to and from are both route objects.if (to.path === "/recommend") {alert("hello");}});

在 main.js 中引入全局路由配置，

import Vue from "vue";import App from "./App.vue";import router from "./router";import {Button, Tabs, TabPane } from "element-ui";// ponent('el-button',Button)import axios from "axios";import "./router/global-config"; Vue.prototype.$http = axios; // 给Vue原型绑定 axios 这样我们项目中的每一个组件都可以通过 this.$http 来使用 axios了Vue.use(Button);Vue.use(Tabs);Vue.use(TabPane);Vue.config.productionTip = false;new Vue({router, // 在根实例选项中注入路由render: h => h(App)}).$mount("#app");

路由独享守卫案例

import Home from "../pages/home";import Category from "../pages/category";import Recommend from "../pages/recommend";import ShopCar from "../pages/shopcar";import Mine from "../pages/mine";import Error from "../pages/error";import Zhy from "../pages/home/children/zhy.vue";import Lsy from "../pages/home/children/lsy.vue";import List from "../pages/list";const token = window.localStorage.getItem("token");const routes = [{path: "", //路由路径redirect: "/home"},{path: "/home", //路由路径component: Home, //当前路由路径对应的组件children: [{path: "", //这里不写‘/’redirect: "zhy"},{path: "zhy", //这里不写‘/’component: Zhy,name: "zhy"},{path: "lsy",component: Lsy,name: "lsy",alias: "lishanyu"}]},{path: "/category", //路由路径component: Category //当前路由路径对应的组件},{path: "/recommend", //路由路径component: Recommend //当前路由路径对应的组件},{path: "/shopcar", //路由路径component: ShopCar, //当前路由路径对应的组件beforeEnter: (to, from, next) => {console.log("beforeEnter");if (token) {next();} else {next(false);}}},{path: "/mine", //路由路径component: Mine //当前路由路径对应的组件},{path: "/list/:id", //用于url携带id 和查找字符串component: List,name: "list" //当前路由路径对应的组件},{path: "/error", //路由路径component: Error //当前路由路径对应的组件}// {//path: '**', //错误路由匹配，vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个//redirect: '/error' //重定向// },];// 导出模块export default routes;

组件内守卫【王者】案例
src > pages > home > children > zhy.vue

<template><article><div><p>张浩雨个人页面</p></div></article></template><script>export default {name: "Zhy",beforeRouteLeave (to, from, next) {if(confirm('确定要离开么？')){next()}else{next(false)}}};</script><style></style>

<template><article><div><p>ShopCar页面</p><div>购物车<hr /><h3>数据预载的数据渲染</h3><ul><li v-for="item in categorys.data" :key="item.id"><p>商品名称： {{ item.shop_name }}</p><p>商品价格： {{ item.price }}</p></li></ul></div></div></article></template><script>import axios from "axios";export default {beforeRouteEnter(to, from, next) {axios.get("/mock/shopcar.json").then(res => {console.log(res);// 问题：我们想把获得的数据提前给到组件，但是我们在这个钩子中无法获得组件，this也没有// 解决next(vm => {console.log("张浩雨: beforeRouteEnter -> vm", vm);vm.$set(vm.categorys, "data", res.data);next();});}).catch(err => console.log(err));},name: "ShopCar",data() {return {categorys: {data: null}};}};</script><style lang="stylus" scoped>ullist-style none</style>

全局导航守卫 router.beforeEach((to, from, next) => { })router.afterEach((to, from) => { }) 路由独享守卫 beforeEnter ( to,from,next ) { } 组内守卫 beforeRouteEnter (to, from, next) {

next(vm => {

// 通过vm访问组件实例

})

}beforeRouteUpdate (to, from, next) {

// just usethis

this.name = to.params.name

next()

}beforeRouteLeave (to, from , next) {

const answer = window.confirm(‘Do you really want to leave? you have unsaved changes!’)

if (answer) {

next()

} else {

next(false)

}

过渡动效transtion

1.下载animate.css $ yarn add animate.css -S

main.js 引入animate.css

import Vue from 'vue'import App from './App.vue';import router from './router';import axios from 'axios';import {Button,TabPane,Tabs} from 'element-ui';import './router/global-config';import 'animate.css';Vue.prototype.$https = axios;// Vue.use( ElementUI )Vue.use(Button);Vue.use(TabPane);Vue.use(Tabs);Vue.config.productionTip = falsenew Vue({render: h => h(App),router //在根实例中注入路由}).$mount('#app');

将router-view包裹起来

<section class="row"><transitionmode="out-in"enter-active-class="animated rotateIn"leave-active-class="animated rotateOut"><router-view></router-view></transition>

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用并设置不同的 name。

const Foo = {template: `<transition name="slide"><div class="foo">...</div></transition>`}const Bar = {template: `<transition name="fade"><div class="bar">...</div></transition>`}

基于路由的动态过渡

<transition :name="transitionName"><router-view></router-view></transition>

// 接着在父组件内// watch $route 决定使用哪种过渡watch: {'$route' (to, from) {const toDepth = to.path.split('/').lengthconst fromDepth = from.path.split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'}}

导航守卫 ----“导航”表示路由正在发生改变。

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局导航守卫

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({... })router.beforeEach((to, from, next) => {// ...})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 toprop或 router.push 中的选项。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫 ----2.5.0 新增

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。必须保证整个项目的守卫和异步路由组件解析完成

#全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {// ...});

路由独享守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({routes: [{path: "/foo",component: Foo,beforeEnter: (to, from, next) => {// ...}}]});

这些守卫与全局前置守卫的方法参数是一样的。

组件内守卫

你可以在路由组件内直接定义以下路由导航守卫： beforeRouteEnterbeforeRouterUpdatebeforeRouterLeave

const Foo = {template: `...`,beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate(to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}};

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

beforeRouteUpdate (to, from, next) {// just use `this`this.name = to.params.namenext()}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from , next) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (answer) {next()} else {next(false)}}

完整的导航解析流程

导航被触发。在失活的组件里调用离开守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({/* 组件定义对象 */ })

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Foo.vue') // 返回 Promise

注意

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

const router = new VueRouter({routes: [{path: '/foo', component: Foo }]})

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

路由元信息

定义路由的时候可以配置 meta 字段：

const router = new VueRouter({routes: [{path: '/foo',component: Foo,children: [{path: 'bar',component: Bar,// a meta fieldmeta: {requiresAuth: true }}]}]})

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {// this route requires auth, check if logged in// if not, redirect to login page.if (!auth.loggedIn()) {next({path: '/login',query: {redirect: to.fullPath }})} else {next()}} else {next() // 确保一定要调用 next()}})