如何在Vue3中定义子路由?
时间: 2024-09-29 10:01:26 浏览: 20
在 Vue3 中,定义子路由主要是通过配置 `vue-router` 的 `routes` 对象。子路由通常是基于组件的,每个子路由对应一个包含视图内容的组件。下面是一个基本的例子:
首先,安装依赖:
```bash
npm install vue-router
# 或者
yarn add vue-router
```
然后,在项目中创建一个路由文件(例如 `src/router/index.js`),添加子路由配置:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import ChildRoute from '@/components/ChildRoute.vue'
const routes = [
{
path: '/home', // 子路由路径
component: Home, // 对应的组件
},
{
path: '/about',
component: About,
},
{
path: '/childroute', // 可能更复杂的路径,如嵌套
name: 'ChildRoute',
component: ChildRoute, // 或者用 alias 名称指向组件
children: [
{
path: '', // 子子路由的根路径
component: SomeNestedComponent, // 相应的嵌套组件
}
]
}
]
const router = createRouter({
history: createWebHistory(), // 使用默认浏览器历史 API
routes,
})
export default router
```
现在,可以在组件中使用 `<router-link>` 来导航到子路由,或者在布局组件(如 `App.vue`)里使用 `<router-view>` 显示当前的路由内容。