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
相關文章
相關標籤/搜索