Vue项目案例

路由：index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import First from '../views/first.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: First
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

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

export default router

视图页面：views

<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right">
            <div class="top">
                <img src="img/title.jpg" alt="">
            </div>
            <div class ="buttom">
                <Right></Right>
            </div>
        </div>
    </div>
</template>

<script>
    import Left from "../components/Left";
    import Right from "../components/Right";
    export default {
       components:{
           Left,
           Right
       }
    }
</script>

<style scoped>
    *{
        padding: 0;
        margin:0;
    }
    .left{
        width:100px;
        float: left;
        margin-right: 10px;
    }
    .right{
        width: 1000px;
        float: left;
        margin-left: 10px;
    }
    .main{
        width: 1200px;
        margin: 20px auto;
    }
    .top img{
        height: 200px;
        width: 1000px;
        object-fit: cover;
    }
    .left,.right{
        background-color: #f5f5f5;
        height: 500px;
    }
</style>

组件零部件components
msg.js

import Vue from 'vue';
export default new Vue;
/*事件总线*/

Left.vue

<template>
    <div>
        <div class="title">热门推荐</div>
        <ul class="menu">
            <li @click="menu1">笔记本电脑</li>
            <li @click="menu2">手机</li>
            <li @click="menu3">手机</li>
            <li @click="menu4">手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
        </ul>
    </div>
</template>

<script>
	//引入事件总线
    import Msg from './msg.js'
    export default {
        name: "left",
        //事件
        methods:{
            menu1:function () {
            	//事件总线传值，$emit('参数名'，'参数值')触发$on
                Msg.$emit("val","1");
            },
            menu2:function () {
                Msg.$emit("val","2");
            },
            menu3:function () {
                Msg.$emit("val","3");
            },
            menu4:function () {
                Msg.$emit("val","4");
            }
        }