首页vue动态路由和静态路由合并代码

vue动态路由和静态路由合并代码

时间: 2023-10-13 08:18:14 浏览: 129

Vue中的路由可以使用静态路由和动态路由。静态路由是在路由配置时就确定了的，而动态路由则是在运行时通过参数来生成的。如果需要在Vue中同时使用静态路由和动态路由，可以将它们合并到一起。下面是一个示例代码： ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' import About from '@/views/About.vue' import User from '@/views/User.vue' Vue.use(Router) const staticRoutes = [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: staticRoutes }) router.addRoutes([ { path: '/user/:id', name: 'user', component: User } ]) export default router ``` 在上面的代码中，我们首先定义了`staticRoutes`数组来存储静态路由的配置。然后，我们创建了一个新的`Router`实例，并使用`staticRoutes`数组作为初始的路由配置。接着，我们使用`router.addRoutes()`方法添加了一个动态路由，该路由用于匹配以`/user/`开头的路径，并将匹配到的参数传递给`User`组件。最后，我们将`router`实例导出，以便在Vue应用程序中使用。这样，我们就实现了静态路由和动态路由的合并。

阅读全文