Question

我的VueJS应用程序中有以下路径：

var regex8 = /^-?([0-9]{1,8})?$/;

const routes = [ { path: '/', component: PlacesList }, { name: 'place', path: '/places/:name', component: CurrentWeather, children: [ { name: 'alerts', path: 'alerts', component: ForecastAlerts }, { name: 'forecast', path: 'forecast', component: ForecastTimeline } ] } ];收到来自ForecastTimeline的道具：

CurrentWeather

当我从export default { name: 'ForecastTimeline', props: ['forecastData'], components: { ForecastDay } }导航到/places/:name/forecast时，一切正常。但是，当我尝试直接联系/places/:name时，我收到/places/:name/forecast错误。发生这种情况是因为Cannot read property 'summary' of undefined在forecastData组件中异步提取。处理传递给嵌套路由的异步属性的正确方法是什么？

Answer 1

您是否尝试在获取数据时不显示子路径组件？

类似的东西：

export default {
  name: 'CurrentWeather',
  data(){
    return {
      loading: true
    }
  },
  created(){
    this.fetchForecastData().then(() => {
      this.loading = false;
    });
  },
  methods: {
    fetchForecastData() {
      return fetch('http://..');
    }
  }
}

在CurrentWeather模板中：

<router-view v-if="!loading"></router-view>

将道具传递给嵌套路线

1 个答案: