vue-router(二)_vue2 router parent-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44845659/article/details/122258147

本文介绍了在Vue项目中如何通过封装路由来实现代码的简洁化。主要步骤包括：1) 引入Vue Router并配置路由；2) 实现全局路由守卫，处理登录状态检查；3) 在routes.js中定义路由结构，使用懒加载优化；4) 在main.js中挂载路由。通过这种方式，可以有效地组织和管理项目的路由，提高代码的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中如何封装一个路由，使vue路由代码更加简洁
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})         

//全局路由守卫
router.beforeEach((to, from, next) => {
    let isLogin = localStorage.getItem('token'); //获取缓存中的token
    if (to.matched.length === 0) { //如果未匹配到路由
        from.name ? next({
            name: from.name
        }) : next('/'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
    } else {
        //判断该路由是否是必须登录
        if (to.meta.needLogin) {
            if (isLogin) {
                next();
            } else {
                //不存在token，表示未登录，将回到登录页面
                next({
                    path: '/login',
                    query: {
                        redirect: to.fullPath
                    } //登录成功后跳转到该路由
                });
            }
        } else {
            next();
        }
    }
})

export default router

routes.js

import route from './route-lazy.js'
import asyRouter from './route-asy.js'

const routes = [{
        path: '/',
        name: 'login',
        component: route.login
    },
    {
        path:'/login',
        name:'login',
        component:route.login
    },
    {
        path: '/notFound',
        name: 'notFound',
        component: route.notFound
    },
    {
        path: '/layout',
        name: 'layout',
        component: route.layout,  
        redirect: '/home',
        children: [
            ...asyRouter
        ]
    },
]  

export default routes;

route-lazy.js

const login = () =>
	import( /* webpackChunkName: "login" */ '../views/login.vue')
const notFound = () =>
	import( /* webpackChunkName: "notFound" */ '../views/notFound.vue')
const layout = () =>
	import( /* webpackChunkName: "layout" */ '../views/layout.vue')
const home = () =>
	import( /* webpackChunkName: "home" */ '../views/home.vue')
/**************************人员管理**************************/
//人员管理
const userManage = () =>
	import( /* webpackChunkName: "userManage" */ '../views/userManage')
//人员列表
const userList = () =>
	import( /* webpackChunkName: "userList" */ '../views/userManage/userList.vue')
export default {
	login,
	notFound,
	layout,
	home,

	//人员管理
	userManage,
	userList
}

route-asy.js

import route from './route-lazy.js'
const asyRoute = [{
        path: '/home',
        name: 'home',
        component: route.home,
        meta: {
            parent: '',
            name: '工作台',
            iconfont: 'iconfont iconshouye1-copy',
            needLogin: true,
        },
        children: []
    },
    {
        path: '/userManage',
        name: 'userManage',
        component: route.userManage,
        redirect: "/userList",
        meta: {
            parent: '',
            name: '员工管理',
            iconfont: 'iconfont iconjiaoseguanli',
            needLogin: true,
        },
        children: [{
            path: '/userList',
            name: 'userList',
            component: route.userList,
            meta: {
                parent: '员工管理',
                name: '员工列表',
                iconfont: 'iconfont iconyonghu2',
                needLogin: true,
            },
            children: []
        } ]
    }
 ]
    }
];


export default asyRoute;

将路由挂载到全局
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
    router，
    render: h => h(App)
}).$mount('#app')