vue动态加载路由的代码

可以使用Vue中的懒加载方式来动态加载路由，示例代码如下：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

在这个例子中，当访问`/foo`或`/bar`路径时，`Foo.vue`或`Bar.vue`组件将动态加载并渲染。这样可以避免在应用程序初始加载时加载所有组件的资源，提高了应用程序的性能。

相关问题

vue动态添加路由示例

可以使用 Vue Router 的 addRoute 方法来动态添加路由。示例代码如下：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    }
  ]
})

// 动态添加路由
router.addRoute({
  path: '/about',
  name: 'About',
  component: () => import('@/views/About.vue')
})

这样就可以在运行时动态添加一个名为 About 的路由，访问路径为 /about。

vue2动态加载路由

在Vue2中动态加载路由可以通过以下几个步骤实现：
1. 首先，在router.js文件中引入Vue和VueRouter，并使用Vue.use(VueRouter)来启用VueRouter插件。
2. 接下来，创建一个空的路由配置数组routes，并将其赋值为静态路由数组staticRouter。
3. 在router.js中创建一个新的VueRouter实例，将routes数组作为参数传入。
4. 最后，将router实例导出为默认模块。

示例代码如下：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)

import { staticRouter } from "@/utils/data";

const routes = staticRouter;

const router = new VueRouter({
  routes
})

export default router