2024年最新Vue meta属性 路由元信息前后配置守卫，2024年最新2024-2024历年阿里Web前端面试真题

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

requiredPath: true,

},

component: () =>

import (‘…/views/main/index.vue’)

},

{

path: ‘/userList’,

name: ‘’,

meta: {

title: ‘用户列表’,

requiredPath: true,

},

component: () =>

import (‘…/views/main/userList.vue’)

}

全局页面守卫(router/index.js)

---

早于create 他里面没有this 可以传vm来访问this

// 在路由元信息配置守卫 requiredPath为true, 适合守卫多个页面 vue3next() 变成return true

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

if (localStorage.getItem('token')) {

    next()

} else {

    if (to.meta.requiredPath) { //没有token requiredPath为true 守卫不让进,跳入login

        next('/login')

    } else {

        next()

    }

}

})

不同页面展示不同文字(router/index.js)

---

它里面没有next,它是最后一步 它是路由钩子

// 导航后置守卫(当你真正进入到某个页面之后才执行)

router.afterEach((to, from) => {

// 设置路由的标题 (可自定义)

document.title = to.meta.title || '常驻标题'

    // 将所有的页面切换之后滚动到最顶部

window.scrollTo(0, 0)

})

源码

–

router/index.js

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const routes = [{

    path: "/",

    redirect: '/login', // 重定向:重新指向其它path,会改变网址

},

// 过app.vue

{

    path: '/login',

    name: '', //name是跳转时用params的跳转名字不加/,params跳转的方式,地址栏不显示

    meta: {

        title: '后台管理登录',

        requiredPath: false,

    },

    component: () =>

        import ('../views/login.vue')

},

{

    path: '/main',

    name: '',

    component: () =>

        import ('../views/main/main.vue'),

    children: [{

            path: '/',

            name: '',

            meta: {

                title: '后台管理主页',

                requiredPath: true,

            },

            component: () =>

                import ('../views/main/index.vue')

        },

        {

            path: '/userList',

            name: '',

            meta: {

                title: '用户列表',

                requiredPath: true,

            },

            component: () =>

                import ('../views/main/userList.vue')

        }

    ]

}

]

const router = new VueRouter({

routes

})

// 在路由元信息配置守卫 requiredPath为true, 适合守卫多个页面 vue3next() 变成return true

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

if (localStorage.getItem('token')) {

    next()

} else {

    if (to.meta.requiredPath) { //没有token requiredPath为true 守卫不让进,跳入login

        next('/login')

    } else {

        next()

    }

}

})

// 导航后置守卫(当你真正进入到某个页面之后才执行)

router.afterEach((to, from) => {

// 设置路由的标题 (可自定义)

document.title = to.meta.title || '常驻标题'

    // 将所有的页面切换之后滚动到最顶部

window.scrollTo(0, 0)

})

export default router

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。