Vue框架App.vue里面mounted执行了两次解决方案 - 好文

背景：
4个页面一个长连接根据推送过来的页面标识跳转对应的页面
解决方案：

1,如果长链接放在最外层App.vue里面，请求到的所有信息都放到缓存里面或vuex里面，在各页面各取所需。还是长链接在一个页面里面了。可是每跳转一个页面，app里的mounted又被执行一次ps：忘记了我当时为什么放弃了这种作法。
2,如果在各页面分别建立长链接，每跳转一次，重连一次，体验不好。
3,如果把各页面分成模块，放到一个页面，通过长链接请求到的页面标示v-if显现不同的页面，若项目需求增多，不利于维护。
4，接着3，或者就写一个页面
里面四部分分别是组件，这样还能实现父子组件传参,ps:补充，我分割了一下代码，但是逻辑太多，错综复杂，比如广告页使用定时器，在展示其他页面（逻辑在组件里面）的时候取消定时器，这是但是这是两个页面
即两个兄弟组件使用同一种方法，太乱。

目前项目用的是第三种，但是由于需求慢慢增多，代码太多，查看代码时候很费事。所以进行改造，打算实行第一种方法。这就遇到问题了
首先我在App里面嵌入四个页面这时候把App.vue当做父元素，四个页面作为子页面在App里面跳转。长连接写在App.vue里面
路由如下所示：
routes: [ { path: '/', component:App, children:[ { path:'', redirect:
'/nobodyCupboard', }, { path: '/nobodyCupboard', name:'nobodyCupboard',
component: nobodayCupboard }, { path:'/advertise', name:'advertise', component:
advertise }, { path:'/bye', name:'bye', component: bye }, { path: '/welcome',
name:'welcome', component: welcome }, ] } ],
执行项目 App的mounted里面的时间执行了两次。谷歌很多没有找到原因。
无奈尝试在App里面再加一个页面index index为父路由，4个页面嵌入index里面
这时路由如下所示：
routes: [ { path: '/', component:App, children:[ { path:'', redirect:'/index',
}, { path:'/index', component:index1, children:[ { path:'', redirect:
'/index/advertise', }, { path: '/index/nobodyCupboard', name:'nobodyCupboard',
component: nobodayCupboard }, { path:'/index/advertise', name:'advertise',
component: advertise }, { path:'/index/bye', name:'bye', component: bye }, {
path:'/index/welcome', name:'welcome', component: welcome }, ] } ] } ],
再执行项目在index的mounted里面的时间只执行一次

热门工具换一换