2024年前端最全Vue meta属性 路由元信息前后配置守卫(2)，腾讯前端面试难吗

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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

{

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’)

}

全局页面守卫(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 || '常驻标题'

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！