Vue meta属性 路由元信息前后配置守卫

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

组件级守卫

---

组件级路由守卫 放在要守卫的组件里，除了全局是router.开头,其他是befor(没.)开头,跟data和methods同级

beforeRouteLeave(to, from, next) {

const answer = window.confirm(‘还没有保存,确定要离开吗?’)

if (answer) {

next()

} else {

next(false)

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
链图片转存中…(img-V0RZVabL-1714986904811)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！