vue3实现三级路由跳转
时间: 2023-12-06 09:36:49 浏览: 40
实现Vue3三级路由跳转的步骤如下:
1. 在router.js中定义三级路由,例如:
```javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About,
children: [
{
path: 'contact',
name: 'Contact',
component: Contact
}
]
}
]
```
2. 在App.vue中添加<router-view>标签,用于显示路由组件。
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
3. 在About.vue中添加<router-view>标签,用于显示子路由组件。
```html
<template>
<div>
<h1>About Page</h1>
<router-view></router-view>
</div>
</template>
```
4. 在Contact.vue中添加内容,例如:
```html
<template>
<div>
<h1>Contact Page</h1>
<p>This is the contact page.</p>
</div>
</template>
```
5. 在main.js中导入VueRouter和定义的路由,然后创建router实例并将其传递给Vue实例。
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About,
children: [
{
path: 'contact',
name: 'Contact',
component: Contact
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
createApp(App).use(router).mount('#app')
```