动态添加路由vue3
时间: 2023-11-14 22:04:50 浏览: 37
在 Vue3 中,可以通过 `createRouter` 函数创建一个路由实例,并使用 `addRoute` 方法动态添加路由。具体步骤如下:
1. 在 `router/index.js` 中引入 `createRouter` 和路由组件:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
```
2. 创建路由实例:
```javascript
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
```
3. 使用 `addRoute` 方法动态添加路由:
```javascript
router.addRoute({
path: '/dynamic',
name: 'Dynamic',
component: () => import('../views/Dynamic.vue')
})
```
注意:动态添加的路由必须在 `router` 实例创建之后进行。