嵌套组件与嵌套路由的使用

布满荆棘的人生 2022-02-03 18:27 228阅读 0赞

## 基于多级菜单栏的嵌套组件的使用 ##

涉及文件:入口文件**main.js**,主组件**App.vue**,layouts目录下的**index.js**,组件**layouts.vue**,组件**appContain .vue**,router目录下的**index.js**和**staticRouters.js**

**项目目录:**  
![在这里插入图片描述][20190509224647201.png]  
main.js代码如下:

import Vue from 'vue'
    import App from './App.vue'
    
    import router from './router/index'
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

app.vue代码如下:

<template>
      <div>
        <p>Loving you</p>
        <router-view></router-view>
      </div>
    </template>

layouts目录下layouts.vue代码如下:

<template>
      <div>
       		<top-contain></top-contain>
       		<side-contain></side-contain>
       		<app-contain></app-contain>
       		<foot-contain></foot-contain>
      </div>
    </template>
    <script>
    	import {topContain,sideContain,appContain,footContain} from './../layouts'
    	export default {
     		components: {topContain,sideContain,appContain,footContain }
    	}
    </script>

index.js代码如下:

export { default as topContain } from './topContain'
    export { default as sideContain } from './sideContain'
    export { default as appContain } from './appContain'
    export { default as footContain } from './footContain'

appContain.vue代码如下:

router目录下index.js代码如下:

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import staticRouters from './staticRouters'
    const router=new VueRouter({
        routes:staticRouters
    })
    export default router

staticRouters.js代码如下:

import layouts from './../layouts/layouts'
    const staticRouters =[
        {path:'/',redirect:'/index'},
        {
            path:'/index',
            //渲染在最高层出口router-view标签内,path有'/'
            component: layouts ,
            children:[{
                path:'love',
                //渲染在嵌套组件appContain.vue的router-view标签内,path无'/'
                component: ()=>{ return import ( './../components/love.vue') } 
                }
            ]
        }
    ]
    
    export default staticRouters

展示如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70]

[20190509224647201.png]: /images/20220203/1beccddbe21c49249fff2fcb6e605aa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5NzU0OA_size_16_color_FFFFFF_t_70]: /images/20220203/327c7f3399374898bf6780f8b6790e40.png