vue嵌套布局实现方式
我们给出一个简单的嵌套布局的例子。假设我们有一个主布局组件 MainLayout.vue，里面包含一个导航条和一个 <router-view> 用于显示嵌套的子组件。再假设我们有一个子组件 ChildComponent.vue。
- MainLayout.vue:
1<template>
2 <div>
3 <nav>
4 <!-- Your navigation links here -->
5 <a href="/">Home</a>
6 <a href="/child">Child</a>
7 </nav>
8
9 <router-view></router-view> <!-- This is where ChildComponent will be rendered -->
10 </div>
11</template>
12
13<script>
14export default {
15 name: 'MainLayout'
16}
17</script>
18
19<style scoped>
20/* Your CSS styles here */
21</style>
- ChildComponent.vue:
1<template>
2 <div>
3 <h2>I'm the child component</h2>
4 <!-- other child component content -->
5 </div>
6</template>
7
8<script>
9export default {
10 name: 'ChildComponent'
11}
12</script>
13
14<style scoped>
15/* Your CSS styles for the child component */
16</style>
现在，你可以在路由配置中设置这个嵌套关系：
1import Vue from 'vue'
2import Router from 'vue-router'
3import MainLayout from '@/components/MainLayout.vue'
4import ChildComponent from '@/components/ChildComponent.vue'
5
6Vue.use(Router)
7
8export default new Router({
9 routes: [
10 {
11 path: '/',
12 component: MainLayout,
13 children: [
14 {
15 path: 'child',
16 component: ChildComponent
17 }
18 // ... other child routes
19 ]
20 }
21 ]
22})
如此，当你访问 /child 路径时，ChildComponent 将会被渲染在 MainLayout 的 <router-view> 位置。