Vue全家桶+Node.js全栈开发Xmall商城 - 1.3 嵌套路由控制导航组件的显示

首先需要添加一些素材：

 

MHeader.vue代码有些多，稍后会放在文件里面，还有上面的图片素材。

https://download.csdn.net/download/jolinoy/85089713https://download.csdn.net/download/jolinoy/85089713代码及其它素材，请查看上面链接。

1.3 嵌套路由控制导航组件的显示第1步：在router/index.js里面，导入Home组件，并挂载路由。
1.3 嵌套路由控制导航组件的显示第2步：在router/index.js里面，导入Login组件，并挂载路由。
1.3 嵌套路由控制导航组件的显示第3步：在views/Login/index.vue里面，创建组件，并设置信息。
1.3 嵌套路由控制导航组件的显示第4步：在router/index.js里面，导入Home组件，并挂载路由。
1.3 嵌套路由控制导航组件的显示第5步：在views/index.vue里面，导入MHeader组件，并挂载路由。

下图为项目的整个目录：

操作步骤如下：

1.3 嵌套路由控制导航组件的显示第1步：在router/index.js里面，导入Home组件，并挂载路由。
1.3 嵌套路由控制导航组件的显示第2步：在router/index.js里面，导入Login组件，并挂载路由。

router/index.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/views/Index'
import Login from '@/views/Login'
import Home from '@/views/Home'
import Goods from '@/views/Goods'
import Thanks from '@/views/Thanks'

Vue.use(VueRouter)

const routes = [
  {
    path:'/', // 1.3 嵌套路由控制导航组件的显示第1步：导入Home组件，并挂载路由。
    redirect:'/home', // 重定向到/home
    name:'home',
    component:Index,
    children:[
      {
        path:'home',  // 1.3 嵌套路由控制导航组件的显示第4步：在router/index.js里面，导入Home组件，并挂载路由。
        component:Home
      },
      {
        path:'goods',
        component:Goods
      },
      {
        path:'thanks',
        component:Thanks
      }
    ]
  },
  {
    path:'/login',  // 1.3 嵌套路由控制导航组件的显示第2步：导入Login组件，并挂载路由。
    name:'login',
    component:Login
  }
]

const router = new VueRouter({
  // base: process.env.BASE_URL,
  routes
})

export default router

1.3 嵌套路由控制导航组件的显示第3步：在views/Login/index.vue里面，创建组件，并设置信息。

 views/Login/index.vue代码如下：

<template>
    <div>
        <h2>登陆页面</h2>   
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

1.3 嵌套路由控制导航组件的显示第4步：在router/index.js里面，导入Home组件，并挂载路由。

请查看router/index.js代码。

 1.3 嵌套路由控制导航组件的显示第5步：在views/index.vue里面，导入MHeader组件，并挂载路由。

view/index.vue代码如下：

<template>
    <div>
        <m-header></m-header>
        <!-- 子路由的出口 -->
        <router-view></router-view>
    </div>
</template>

<script>
    import MHeader from '@/common/MHeader'; // 1.3 嵌套路由控制导航组件的显示第5步：在views/index.vue里面，导入MHeader组件，并挂载路由。
    export default {
        components: {
            MHeader,
        }
    }
</script>

<style lang="scss" scoped>

</style>

效果如下：