zoukankan      html  css  js  c++  java
  • 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
    
  • 相关阅读:
    PHP数组简介
    如何在不使用系统函数的情况下实现PHP中数组系统函数的功能
    弹性盒布局display:flex详解
    关于JS面向对象中原型和原型链以及他们之间的关系及this的详解
    如何使用AngularJS对表单提交内容进行验证
    如何用canvas画布画旋转的五角星
    MYSQL常用函数以及如何操作数据
    数据库基础以及表的创建
    PHP中的OOP
    PHP中数组的遍历
  • 原文地址:https://www.cnblogs.com/knuzy/p/11374530.html
Copyright © 2011-2022 走看看