vue饿了么webapp之router-view传值（深坑！！）（evenBus的使用）

首先，想要在app.vue组件里面请求获取到商品的信息seller，想把seller通过router-view传递给当前router-view所显示的组件good.vue，在good里面使用seller，别人也是这样子写的，一点问题也没有：

App.vue

good.vue

然后就报错了。。。

vue开发者工具也显示good的props的seller是undefined的

然而，我现在还不知道这是为什么，代码也和别人的一摸一样，但是就是不能传值。唯一不同的就是，别人的vue-router版本是2.1，而我的是2.7，难道是因为这个原因吗？我也怀疑是版本问题。。。

真烦，然后我就只能通过evenbus传值了，当然vuex也可以，我这里先使用evenbus。

先在main.js声明一个全局的evenbus

然后我需要在app.vue这里把seller广播出去，使用evenBus.$emit('seller',seller)，第一个参数是广播的事件名，其他组件通过这个事件名来监听这个事件，如果evenbus会复用，记得不要起重复的名字；第二个参数是你传递的值。

然后在你需要使用seller的组件监听该事件evenBus.$on('seller',this.setseller)，第一个参数是事件名，第二个是回调函数，该函数的参数就是监听到传过来的seller

注意， evenBus.$emit是瞬时性的，因此使用 evenBus.$emit派发事件时，evenBus.$on要已经在监听了，就是evenBus.$on要比emit先执行，否则无法接收到事件。

如果涉及到路由，由于路由是先加载到新路由，再进行旧路由的销毁，因此要在新路由的created()里面evenBus.$on，旧路由的destory里面evenBus.$emit

evenBus. $emit( 'userName', this. userName)

evenBus. $emit( 'userName', this. userName)

--------------------------------------------------------分割线-------------------------------------------------------------------

现在，通过router-view上传值可以获取了，其实应该是我写错了...

在main.js中

const routes=[
		    {
				path:'/',
				redirect:'/goods'
			},
			{
				path: '/goods',
				component: goods
			},
			{
				path: '/rating',
				component: rating
			},
			{
				path: '/seller',
				component: seller
			}
]

在app.vue中：

<div id="app">
    <v-header :seller="seller"></v-header>
   <div class="tab border-1px">
  <div class="tab-item">
        <router-link to="goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/rating">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
     <div class="content">
       <keep-alive>
       <router-view :seller="seller"></router-view>
       </keep-alive>
    </div>
  </div>

一开始，我觉得goods、rating、seller应该作为子组件放在根下面，但是，得到的结果是，在app.vue的router-view里面会把原来在app.vue的也显示出来..

在跟路径下是直接进入到app.vue组件，如果给跟路径设定redirect重定向，重定向的组件会显示在router-view当中，这样才是正确的。

与以下这种情况比较：

router:

{
      path:'/',
      redirect:'/login'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path:'/root',
      component: Root,
      redirect:'/root/main/root',
      children:[
        {
          path:'main/:type',
          component:Main,
          name:'首页',
          meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
          },
        },
        {
          path: 'purchase-exl',
          component: purchaseExl,
          name:'进货统计报表',
          meta: {
            requireAuth: true,  
          },
        },
        {
          path: 'medicine-list',
          component: medicineList,
          name: '药品列表',
          meta: {
            requireAuth: true,  
          },
        },
        {
          path: 'user-list',
          component: userList,
          name: '用户列表',
          meta: {
            requireAuth: true, 
          },
        },
        {
          path: 'factory',
          component: factory,
          name: '厂商管理',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'returnFactory-exl',
          component: returnFactoryExl,
          name: '仓库退货统计报表',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'sellReturn-exl',
          component: sellReturn,
          name: '销售退货统计报表',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'sellRecord-exl',
          component: sellRecord,
          name: '售出统计报表',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'factory',
          component: factory,
          name: '查看厂商列表',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'saleroom-graph',
          component: saleroomGraph,
          name: '查看药店销额统计图',
          meta: {
            requireAuth: true,
          },
        },
        {
          path: 'sales-volume-graph',
          component: salesVolumeGraph,
          name: '查看药品销量统计图',
          meta: {
            requireAuth: true,
          },
        }
      ]
    },

app.vue

<template>
  <div id="app">

     <router-view></router-view>
     
  </div>
  
</template>

在跟路径下访问该路由，进入到app组件，该组件只有一个router-view，而且重定向到login，因此整个页面显示是login，实际也是包裹在app组件当中的。

然后，在跳转到其他路由当中，例如root，也重定向到了他其中一个子路由，由于子路由是依赖于root的，因此把root原有的内容加上子路由才是完整页面。

因此，子路由的意义是切换url时仅仅改变router-view的路由

一般来讲，redirect适用于当前path的组件里面有router-view，让它可以显示默认的组件。redirect不一定只能重定向到它的子路由，其他路由也是可以的，如果重定向到其他路由，则整个页面都显示其他路由的页面。

因此，在跟路由下的重定向和其他路由的重定向不一样。