vue.js - Vue主App怎么和Vue-router渲染出来的组件通信？

问题描述

问 题

Vue小白，刚刚入坑，请问一下主App怎么和我vue-router渲染出来的组件通信？

这是我的主App(App.vue):

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <router-link to="/first">Go to First</router-link>
    <router-link to="/second">Go to Second</router-link>
     <router-view></router-view>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

然后通过vue-router在主app里渲染两个组件，其中一个组件里用Vue-resource进行Http请求(secondComponent.vue)：

<template>
    <div id="secondComponent">
        <h1>请求数据</h1>
        <ul>
            <li v-for="article in articles">
                <p>{{article.title}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                articles:[]
            }
        },
        mounted:function () {
            this.$http.jsonp("https://api.douban.com/v2/movie/top250?count=10").then(function (res) {
               this.articles=res.body.subjects;
            });
        }
    }
</script>

在main.js里我是这样写的:

const routes=[
    {path:"/first", component:firstComponent},
    {path:"/second",component:secondComponent}
];
const router=new vueRouter({
   routes:routes
});
const app=new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

渲染出来的结果是没问题的，我直接点击两个路由的a标签可以正常切换渲染在页面里，但是每次渲染第二个组件的时候，就是发起Http请求的那个组件的时候，都会重新请求一次，请问有什么样的办法可以把我的请求结果缓存下来？因为我注意到每次我切换到另一个组件的时候，发起Http请求的那个组件都会被销毁，所以每次重建都会重新请求，感觉这样有点过于麻烦。

所以我想的是要么在组件里吧请求缓存下来，要么在主App请求一次，然后把数据传递过去，但是我现在还不了解怎么通过router把数据传递给组件。

希望两种方案都可以得到解答，谢谢。

解决方案

不是很记得了，在App.vue里加入router-view，然后加上keep-alive属性，这样组件可以保留而不被销毁。

Update 1.
我是用的Vue.js 1的写法，貌似在2的版本里不是这么写的了。应该可以直接写keep-alive组件。没有验证过

这篇关于vue.js - Vue主App怎么和Vue-router渲染出来的组件通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！