关于前端:Vue-Router进阶

进阶

原文链接：https://note.noxussj.top/?source=sifo

导航守卫

官网文档下面形容的会比拟深奥，而守卫类型也比拟多，其中蕴含了全局前置守卫、全局解析守卫、全局后置钩子、路由独享守卫、组件内守卫。每一种守卫的作用和用法都不雷同。这会使得大家去学习的时候感觉比拟艰难，这边次要介绍比拟罕用的守卫，全局前置守卫，其余的基本上没有那么罕用就不解说了，大家只须要学会全局前置守卫即可。另外导航守卫其实你能够了解成组件的生命周期那样，就是在路由变动过程中的每一个环节，都会触发特定的钩子函数，去做一些事件。

全局前置守卫

这个守卫的作用就是，当你的页面路由扭转时（不含包路由中的参数变动），新页面被齐全渲染之前，就会触发这个全局前置守卫 router.beforeEach。理论我的项目开发中，个别都会在全局前置守卫中进行路由权限的判断，如果用户没有这个路由的权限，则不容许它进行拜访，或者是强制让路由改为登录页。

根底案例

1. 创立全局前置守卫。

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import {routes} from './routes.js'

Vue.use(Router)

const router = new Router({routes})

router.beforeEach((to, from, next) => {
    const validate = true

    if (to.path === '/login') {return next()
    }

    if (validate) {next()
    }

    if (!validate) {next('/login')
    }
})

export default router

2. 创立路由表。

// src/router/routes.js

const routes = [
    {
        path: '/login',
        component: () => import('../components/Login.vue')
    },
    {
        path: '/user',
        component: () => import('../components/user/index.vue')
    }
]

export {routes}

3. 当校验通过时 validate = true，拜访 user 页面，验证路由。

4. 当校验不通过时 validate = false，拜访 user 页面，验证路由。

router.beforeEach

接下来持续介绍全局前置守卫 router.beforeEach，该守卫是一个函数，须要传入一个回调函数。回调函数中别离返回了 to from next 参数。

to 参数

代表行将要进入的指标（路由对象）。

form 参数

代表以后导航正要来到的路由对象。

next 参数

后面两者都是一个对象，而 next 是一个函数。用来决定以后路由是否被容许放行。router.beforeEach 是一个异步函数，就像是一个 promsie，而 next 就像是 resolve 触发器。next 办法的调用参数不同，就会实现不同的路由成果。

路由元信息

定义路由的时候能够配置 meta 字段。作用是在不同路由下都能够通过路由信息对象，或者是在路由守卫中获取到 meta 传入的对象数据。例如拜访 /user 路由时，须要判断用户是否曾经登录。而拜访 /news 时，是不须要判断用户是否登录的。

根底案例

1. 批改路由表。

// src/router/routes.js

const routes = [
    {
        path: '/login',
        component: () => import('../components/MyLogin.vue'),
        meta: {requiresAuth: false}
    },
    {
        path: '/user',
        component: () => import('../components/user/MyIndex.vue'),
        meta: {requiresAuth: true}
    },
    {
        path: '/news',
        component: () => import('../components/MyNews.vue'),
        meta: {requiresAuth: false}
    }
]

export {routes}

2. 批改路由守卫，模仿判断用户是否登录。

// src/router/index.js

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth === false) {return next()
    }

    if (to.meta.requiresAuth === true) {
        const validate = true

        if (validate) {next()
        }

        if (!validate) {next('/login')
        }
    }
})

代码中的逻辑是：如果拜访的页面不须要校验 requiresAuth = false 则放行，如果拜访的页面须要校验 requiresAuth = true 则进行校验，校验中判断用户是否曾经登录 validate，已登录 validate = true 则放行，未登录 validate = false 就会主动跳转到登录页面。

打印 to 对象，校验是否存在 meta 信息。

路由懒加载

咱们都晓得我的项目打包的时候，最终会生成一个包 bundle.js，外面蕴含了所有的利用代码，简直蕴含了 css、javascript、甚至是 image base64 局部，最初通过 index.html 页面进行引入，而后渲染页面。因为 bundle.js 包体积过大，咱们首次渲染白屏的工夫就会加长，导致用户体验感会升高。

为了解决 bundle.js 包体积过大，咱们须要拆分包，咱们所有页面的代码都会打包进 bundle.js 中，通过路由懒加载的模式，每个页面的代码会独立分成一个包，这样咱们首次拜访的时候，就没有必要加载那些不拜访的资源进来，从而放慢首次渲染工夫，当然咱们后续进行拜访其余未加载的资源时就会进行轻微的期待状态，然而这样也算是给首次加载分担了很多压力。

在打包之前须要在 vue.config.js 中敞开一下 sourceMap，这个是源代码地图，目前不做太多介绍。因为打包后会将咱们的源代码进行了压缩、混同。所以无奈清晰的看到咱们本人编写的 JavaScript 代码。通过 sourceMap 就能够看见，然而打包后的我的项目文件中会多进去 .map 的文件，这个是不平安的，倡议打包的时候敞开。

// vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    productionSourceMap: false
})

根底案例
以下失常写法是通过 import 提前将组件引入进来，而后在应用。这种就是非路由懒加载形式。

// src/router/routes.js

import Login from '../components/MyLogin.vue'
import User from '../components/user/MyIndex.vue'
import News from '../components/MyNews.vue'

const routes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/user',
        component: User
    },
    {
        path: '/news',
        component: News
    }
]

export {routes}

验证打包后果。输出命令 npm run build 后能够看到在 dist 目录下生成了 2 个文件。

批改为路由懒加载形式。

// src/router/routes.js

const routes = [
    {
        path: '/login',
        component: () => import('../components/MyLogin.vue')
    },
    {
        path: '/user',
        component: () => import('../components/user/MyIndex.vue')
    },
    {
        path: '/news',
        component: () => import('../components/MyNews.vue')
    }
]

export {routes}

验证打包后果。输出命令 npm run build 后能够看到在 dist 目录下生成了 5 个文件。

然而到了这里同学会有一个疑难，我怎么晓得哪个文件刚好对应的是 /login /user /news 路由呢？接下来就会持续介绍魔法正文。

魔法正文

应用前提是路由懒加载的形式。因为 Vue2.0 底层是依赖 Webpack 进行我的项目打包的，所以利用 Webpack 的 特点，能够给每个包设置不同的名称。通过 webpackChunkName 进行设置。留神：如果 webpackChunkName 雷同则会打进同一个包中。

根底案例

1. 给每个路由增加魔法正文。

// src/router/routes.js

const routes = [
    {
        path: '/login',
        component: import(/* webpackChunkName: "login" */ '../components/MyLogin.vue')
    },
    {
        path: '/user',
        component: import(/* webpackChunkName: "user" */ '../components/user/MyIndex.vue')
    },
    {
        path: '/news',
        component: import(/* webpackChunkName: "news" */ '../components/MyNews.vue')
    }
]

export {routes}

2. 验证打包后果。是不是就能够很显著看到哪个包是属于哪个页面的。

原文链接：https://note.noxussj.top/?source=sifo