vue-router配置


vue項目中vue-router的處理

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login'
import Error from '@/views/error'
import ModifyPassword from '@/views/modifypassword'
import Resetpsd from '@/views/resetpsd'
import MailConfirm from '@/views/mailconfirm'
import {getCookie} from '../utils/util'
// 或者你可以新建一個方法
Router.prototype.goBack = () => {
    merchantwallet.rountisBack = true
    window.history.go(-1)
}
Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: '/',
    routes: [
        {
            path: '/error',
            name: '找不到該頁面',
            component: Error
        },
        {
            path: '/login',
            name: '登錄',
            component: Login
        },
        {
            path: '/modifypassword',
            name: '修改密碼',
            component: ModifyPassword,
            meta:{ requiresAuth: true }  //需要鑒權
        },
        {
            path: '/resetpsd',
            name: '找回密碼',
            component: Resetpsd
        },
        {
            path: '/mailconfirm',
            name: '郵件確認',
            component: MailConfirm
        },
        {
            path: '/...',
            name: '功能頁',
            component: ...,
            meta:{ requiresAuth: true }  //需要鑒權
        }
    ]
})

/**
 *  路由攔截
 *  所有需要鑒權的頁面,如果存儲登錄態的cookie不存在就跳登錄頁
 */
router.beforeEach((to,from,next)=>{
    if(to.matched.some(record=>record.meta.requiresAuth)){   //遍歷 $route.matched 來檢查路由記錄中的 meta 字段
        if(getCookie('session')){
            next()          //進行路由管道中的下一個鈎子
        }else{
            next({
                path: '/login',
                query: { redirect : to.fullPath }
            })
        }
    }else{
        next()
    }
})

export default router;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM