用vue3写一个二级路由
时间: 2023-05-20 13:06:40 浏览: 98
vue二级路由设置方法
5星 · 资源好评率100%
Sure, here's an example of how to create a nested route in Vue 3 using the `vue-router` package:
```
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'
import Profile from './views/Profile.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/contact',
name: 'Contact',
component: Contact
},
{
path: '/profile',
name: 'Profile',
component: Profile,
children: [
{
path: 'settings',
name: 'Settings',
component: Settings
},
{
path: 'notifications',
name: 'Notifications',
component: Notifications
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
In this example, we have a top-level route for the home page, as well as routes for the about and contact pages. We also have a nested route for the profile page, which has child routes for the settings and notifications pages.
阅读全文