首先,想要在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不一定只能重定向到它的子路由,其他路由也是可以的,如果重定向到其他路由,则整个页面都显示其他路由的页面。

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

Logo

前往低代码交流专区

更多推荐