生成一个vue动态路由分配代码
以下是一个简单的示例,展示如何使用Vue Router动态创建和分配路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
// 构建动态路由
const dynamicRoutes = [
{ path: '/page1', component: () => import('@/views/Page1.vue') },
{ path: '/page2', component: () => import('@/views/Page2.vue') },
{ path: '/page3', component: () => import('@/views/Page3.vue') }
]
// 将动态路由添加到路由表中
routes.push(...dynamicRoutes)
const router = new VueRouter({
mode: 'history',
routes
})
export default router
以上代码中,我们首先导入Vue和Vue Router,并启用Vue Router插件。接着定义一个空数组来存储所有路由,然后创建一个动态路由数组,其中包含我们想要动态添加的路由。我们使用“import”语句动态加载每个路由的Vue组件。最后,我们将动态路由数组添加到路由表中,并创建一个VueRouter实例。
你可以根据需要修改该代码,并动态添加或删除路由,或者使用Vue Router提供的其他高级功能。
原文地址: https://www.cveoy.top/t/topic/bbXu 著作权归作者所有。请勿转载和采集!