为什么路由更新时异步组件不会改变？答案

【问题标题】：Why async component doesn't change when the route update?为什么路由更新时异步组件不会改变？
【发布时间】：2020-01-11 15:48:06
【问题描述】：

我在my code on CodeSandbox 中使用async components（见下文）。当我在goto product-1 之后单击goto product-2 时，没有任何反应。我预计 <product-item> 组件会根据单击的组件而更改，但只有 URL 会更改。我什至有一个beforeRouteUpdate 钩子函数。我该如何解决这个问题？

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from 'vue-router';
import ProductPage from './product-page.vue';

Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [
  { path: '/:productId', component: ProductPage },
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  router,  
  render: h => h(App)
}).$mount("#app");

// App.vue
<template>
  <div id="app">
    <router-link to="/product-1">goto product1</router-link>
    <br>
    <br>
    <router-link to="/product-2">goto product2</router-link>

    <div>Router view:</div>
    <router-view :key="$route.params.productId"></router-view>
  </div>
</template>

// product-page.vue
<template>
  <div>
    <product-item></product-item>
  </div>
</template>

<script>
export default {
  name: "product-page",
  components: {
    ProductItem: () => ({
      component: import("./product-item.vue"),
      loading: { template: "<div>loading....</div>" }
    })
  }
};
</script>

<template>
  <div>
    product item: {{product}}
  </div>
</template>

<script>

export default {
  name: "ProductItem",
  mounted: function () {
    this.product = this.$route.params.productId;
  },
  beforeRouteUpdate: function(to, from, next) {
    this.product = to.params.productId;
    next();
  },
  data: function () {
    return {
      product: null
    }
  },
};

</script>

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

问题是路由路径（即/:productId）实际上并没有在/product-1 和/product-2 的链接之间改变（即使参数值改变了），所以@987654326 @ 不会重新渲染。

解决方法是keyrouter-view基于productId参数：

<router-view :key="$route.params.productId" />

【讨论】：