• vue router的 index.js设置


    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import login from '../pages/login/index'
    import Main from '../pages'
    import Register from '../pages/register/register'
    import noFound from '../components/404'
    import noPerm from '../components/403'
    
    import personalInfo from '../pages/personalInfo/personalInfo'
    // children
    import baseInfo from '../pages/personalInfo/baseInfo/baseInfo'
    import stuChange from '../pages/personalInfo/stuChange/stuChange'
    
    import teacher from '../teacher'
    import teacherHome from '../teacher/home'
    
    Vue.use(VueRouter)
    
    const routes = [
        {
            path: '/login',
            name: 'login',
            component: login,
            meta: {
                title: '登录页'
            },
        },
        {
            path: '/register',
            component: Register,
            meta: {
                title: '注册页'
            }
        },
        {
            path: '/403',
            component: noPerm
        },
        {
            path: '/',
            name: 'index',
            component: Main,
            meta: {
                title: '首页',
                // perm: true //设置权限(测试)
            },
            children: [
                // 个人信息
                {
                    path: '/personalInfo',
                    name: 'personalInfo',
                    component: personalInfo,
                    meta: {
                        title: '个人信息'
                    }
                },
                {
                    path: '/personalInfo/stuChange/:id?',
                    name: 'stuChange',
                    component: stuChange,
                    meta: {
                        title: ''
                    }
                },
                {
                    path: '/employService',
                    name: 'employService',
                    meta: {
                        perm: true //设置权限(测试)
                    },
                    component: employService
                },
            ]
        },
        {
            path: '/teacher',
            name: 'teacher',
            component: teacher,
            meta: {
                title: '主页'
            },
            children: [{
                    path: '/teacherHome',
                    name: 'teacherHome',
                    component: teacherHome,
                    meta: {
                        title: '首页'
                    },
                },
                // 匹配不存在的路径页面
                {
                    path: '*',
                    component: noFound
                    // 重定向
                    // redirect: '/'
                    // redirect: {
                    //     path: '/'
                    // }
                    // 动态设置重定向的目标,to目标路由对象,就是访问的路径的路由信息
                    // redirect:(to)=>{
                    //     // if(to.path == '/123'){
                    //     //     return '/'
                    //     // }else if(to.path == '456'){
                    //     //     return { path: '/first' }
                    //     // }else {
                    //     //     return { name: 'index' }
                    //     // }
                    //     return '/'
                    // }
                },
            ]
        }
    ]
    
    const router = new VueRouter({
        routes,
        mode: 'history',
        // linkActiveClass: 'is-active',//当前激活的路由的class名字 
        scrollBehavior(to, from, savePotion) {
            if (savePotion) {
                return savePotion
            } else {
                return {
                    x: 0,
                    y: 0
                }
            }
        }
    })
    
    // meta里可以定义一些自己想要的数据
    // 测试权限
    // 进入导航之前的钩子
    // 写上next()路由才会跳转
    // 可以拦截登录,如果meta里配置了需要登录,则重定向到'/login'页面
    router.beforeEach((to, from, next) => {
        if (to.meta.perm) {
            // next('/403')
            next('/login')
        } else {
            next()
        }
    })
    
    export default router
    
  • 相关阅读:
    Python 面向对象(初级篇)
    python中的运算符
    初识Python
    浅谈计算机
    Zeppelin interperter 模式设置总结图解2
    maven 使用错误
    TensorFlow anaconda命令备忘
    zeppelin ERROR总结
    YARN 命令总结
    Zeppelin interperter 模式设置总结图解1
  • 原文地址:https://www.cnblogs.com/knuzy/p/11374530.html
Copyright © 2020-2023  润新知