vue addroutes实例代码
时间: 2023-09-10 08:02:26 浏览: 56
Vue的addroutes方法是Vue Router中的一个方法,用于动态添加路由配置。它可以接收一个路由配置对象或一个路由配置对象的数组作为参数。
该方法的使用示例如下:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
})
// 动态添加路由的示例
router.addRoutes([
{
path: '/contact',
component: Contact
},
{
path: '/help',
component: Help
}
])
export default router
```
在上面的示例中,首先我们引入了Vue和Vue Router,并使用Vue.use()安装Vue Router插件。然后创建了一个VueRouter实例,并传入了初始的路由配置数组。
接着我们使用addroutes方法动态添加了两个新的路由配置对象,分别是/contact和/help,对应的组件分别是Contact和Help。这样,我们就可以在运行时添加新的路由配置,使得我们的应用可以动态地展示不同的页面内容。
最后,我们将创建的路由实例导出默认,并在Vue的根实例中使用该路由实例。这样,我们的路由配置就生效了。
总结起来,Vue的addroutes方法是用于在Vue Router中动态添加路由配置的方法,通过调用该方法,我们可以在运行时动态地添加新的路由配置对象,从而实现动态路由的功能。