饿了么vue，项目创建流程代码篇（路由基本，将父组件和子组件联系起来）-原创手记-慕课网

创建的过程( 二)：路由功能实现页面切换

目录结构

定义三个子组件，分别是goods,seller,ratings
安装vue-router插件 npm install --save-dev vue-router

// 入口main.js下

import VueRouter from 'vue-router';
import App from './App';
// goods组件
import Goods from './components/goods/goods';
import Seller from './components/seller/seller';
import Ratings from './components/ratings/ratings';
// 全局引用样式
import './common/stylus/index.styl';
/**
 * 入口js  上方引入的是父组件和一个依赖组件
 */
/* eslint-disable no-new */

Vue.use(VueRouter);  // 使用路由插件

/* eslint-disable no-unused-vars */
// 需要一个根组件
let app = Vue.extend(App);
// 实例一个路由,可以拉入自己的配置项
let router = new VueRouter({
  linkActiveClass: 'active'
});

// 配置路由
router.map({
  '/goods': {
    component: Goods
  },
  '/seller': {
    component: Seller
  },
  '/ratings': {
    component: Ratings
  }
});
// 启动路由，配置一个挂载点
router.start(app, '#app');

// 进入页面默认载入板块
router.go('/goods');

子组件goods等可以加内容方便显示

<template>
  <div>内容</div>
</template>
<script type="text/ecmascript-6">
  export default{};
</script>
<style lang='stylus' rel='stylesheet/stylus' type="text/stylus">

</style>

App.vue中使对引入的组件进行样式的设置，注意导入组件之后，进行注册

<!--模板-->
<template>
  <div>
    <v-header></v-header>
    <div class="tab  border-1px">
      <div class="tab-item">
        <!--vue1.0路由引用-->
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <!--路由的外链 点击了路由触发，页面变化的内容部分-->
    <router-view></router-view>
  </div>
</template>
<!--js脚本-->
<script>
  import header from './components/Header/header';
  export default{
    // 注册header
    components: {
      'v-header': header
    }
  };
</script>
<!--样式-->
<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  .tab
    display:flex
    width:100%
    height:40px
    line-height:40px
    border-bottom: 1px solid rgba(7,17,27,0.1)
    .tab-item
      flex:1
      text-align:center
      &>a
        display:block
        text-decoration:none
        font-size:14px
        color:rgb(77, 85, 95)
        &.active
          color:rgb(240, 20, 20)
</style>