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
posted @   叶子玉  阅读(13659)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
历史上的今天:
2018-08-18 vue ESLint自动修复

哥伦布

23°

点击右上角即可分享
微信分享提示