Vue全家桶+Node.js全栈开发Xmall商城 - 1.4 Xmall商城导航组件实现

项目相关的素材放在文章的低部，下载下来即可查看。

下面是项目目录：

目录

1.4 Xmall商城导航组件实现5步骤：
1.4 Xmall商城导航组件实现第1步：在App.vue组件里面导入app组件样式，并设置style。
1.4 Xmall商城导航组件实现第2步：在router/index.js里面导入Goods组件和Thanks组件，并挂载。
1.4 Xmall商城导航组件实现第3步：在views文件夹下面分别新建两个文件夹Goods和Thanks，并分别新建组件，index.vue。
1.4 Xmall商城导航组件实现第4步：在common/MHeader.vue里面设置Breadcrumb和BreadcrumbItem。
1.4 Xmall商城导航组件实现第5步：在src/plugins/element.js里面导入Breadcrumb和BreadcrumbItem，并启用。 

 第1步：在App.vue组件里面导入app组件样式，并设置style。

App.vue代码如下：

<template>
  <div id="app">
    <router-view class="main"></router-view>
  </div>
</template>

// <script>
// export default {
//   name: 'app',
//   components: {
//   }
// }
// </script>

<style lang='scss'>
  @import 'assets/style/index.scss'; // 1.4 Xmall商城导航组件实现第1步：在App.vue组件里面导入app组件样式，并设置style。
  #app{
    height: 100%;
  }
  .main{
    background-color: #ededed;
    overflow: hidden;
    width: 100%;
  }
</style>

第2步：在router/index.js里面导入Goods组件和Thanks组件，并挂载。

 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' // 1.4 Xmall商城导航组件实现第2步：在router/index.js里面导入Goods组件和Thanks组件，并挂载。
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

第3步：在views文件夹下面分别新建两个文件夹Goods和Thanks，并分别新建组件，index.vue。

请查看项目目录。

views/Goods/index.vue代码：

<template>
    <div>
        <h2>Goods</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

views/Thanks/index.vue代码：

<template>
    <div>
        <h2>Thanks</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

第4步：在common/MHeader.vue里面设置Breadcrumb和BreadcrumbItem。

由于MHeader.vue代码太长，这里只做局部截图，如果需要查看完整代码，请下载文章低部的相关代码及素材。

 第5步：在src/plugins/element.js里面导入Breadcrumb和BreadcrumbItem，并启用。 

src/plugins/element.js代码：

import Vue from 'vue'
import { Button,Input,Breadcrumb,BreadcrumbItem } from 'element-ui'
// 1.4 Xmall商城导航组件实现第5步：在src/plugins/element.js里面导入Breadcrumb和BreadcrumbItem，并启用。

Vue.use(Button)
Vue.use(Input)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

运行效果如下：

相关代码及素材下载地址：

Vue全家桶+Node.js全栈开发Xmall商城项目资料-Node.js文档类资源-CSDN下载