vue饿了么webapp之router-view传值(深坑!!)(evenBus的使用)
首先,想要在app.vue组件里面请求获取到商品的信息seller,想把seller通过router-view传递给当前router-view所显示的组件good.vue,在good里面使用seller,别人也是这样子写的,一点问题也没有:App.vuegood.vue然后就报错了。。。vue开发者工具也显示good的props的seller是undefined的然而,我现在还不知道这是为什么,代
首先,想要在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
--------------------------------------------------------分割线-------------------------------------------------------------------
现在,通过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不一定只能重定向到它的子路由,其他路由也是可以的,如果重定向到其他路由,则整个页面都显示其他路由的页面。
因此,在跟路由下的重定向和其他路由的重定向不一样。
更多推荐
所有评论(0)