动态路由配置：Vue.js 路由示例

const routes = [
    {
        path: '/personal',
        name: 'personal',
        component: personal,
        meta: {
            keepAlive: true,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/order',
        name: 'order',
        component: order,
        meta: {
            keepAlive: true,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/orderDetail/:orderNo',
        name: 'orderDetail',
        component: orderDetail,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/login',
        name: 'login',
        component: login,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/register',
        name: 'register',
        component: register,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/forget',
        name: 'forget',
        component: forget,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/setting',
        name: 'setting',
        component: setting,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/address',
        name: 'address',
        component: address,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/addAddress',
        name: 'addAddress',
        component: addAddress,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/editAddress/:id',
        name: 'editAddress',
        component: editAddress,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/setting/:type',
        name: 'settingType',
        component: settingType,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/about',
        name: 'about',
        component: about,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/userAgree',
        name: 'userAgree',
        component: userAgree,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/comment/:orderNo',
        name: 'comment',
        component: comment,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },
    {
        path: '/pay/:orderNo',
        name: 'pay',
        component: pay,
        meta: {
            keepAlive: false,
            isTab: false,
            isAuth: false
        }
    },

    // 重定向
    {
        path: '/',
        redirect: {
            name: 'home'
        }
    }

]

const router = new Router({
    mode: 'history',
    routes
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
    let toName = to.name
    let fromName = from.name
    // 如果是从非tabbar进入tabbar，就跳转到home
    if (tabBars.indexOf(toName) > -1 && tabBars.indexOf(fromName) == -1) {
        router.push({
            name: 'home'
        })
        return
    }
    // 如果是从tabbar进入非tabbar，就把之前的tabbar缓存
    if (tabBars.indexOf(toName) == -1 && tabBars.indexOf(fromName) > -1) {
        store.commit('setCacheTab', fromName)
    }
    // 权限验证
    if (to.meta.isAuth) {
        if (store.state.user.openid) {
            next()
        } else {
            router.push({
                name: 'login'
            })
        }
        return
    }
    next()
})

export default router

代码解析

1. 定义路由配置数组 routes：
   • path：路由路径
   • name：路由名称
   • component：对应的组件
   • meta：元数据，用于存储路由的一些额外信息，例如 keepAlive（是否缓存）、isTab（是否显示在tabbar中）、isAuth（是否需要权限验证）
2. 创建路由实例 router：
   • mode: 'history'：使用 HTML5 History 模式
   • routes：路由配置数组
3. 全局路由守卫 router.beforeEach：
   • 监听每次路由切换
   • to：即将跳转到的路由对象
   • from：上一个路由对象
   • next：控制是否跳转，并可以改变跳转到的地址
   • 功能：
     • 判断是否从非tabbar页面跳转到tabbar页面，如果是，则跳转到主页
     • 判断是否从tabbar页面跳转到非tabbar页面，如果是，则缓存之前的tabbar页面
     • 进行权限验证，如果需要权限验证，则判断用户是否登录，未登录则跳转到登录页面

总结

该示例展示了如何使用 Vue.js 创建动态路由，并通过全局路由守卫实现路由跳转控制和权限验证。在实际项目中，可以根据需要添加更多的路由配置和守卫逻辑。