您可能需要将：key属性添加到<router-view>，如下所示：

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

这样一来，一旦路径改变，Vue Router就会重新加载组件。如果没有密钥，它甚至不会注意到有什么改变，因为使用的是同一个组件（在您的例子中，是Map组件）。

更新---2019年7月3日

我在vue-router文档中发现了这个东西，它叫做In Component Guard。通过它的描述，它确实适合你的需要（实际上也适合我的需要）。所以代码应该是这样的。

export default () {
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
    
    const id = to.params.id
    this.AJAXRequest(id)
    next()
  },
}

正如你所看到的，我只是添加了一个next()函数。希望这对你有帮助！祝你好运！

以下是我以前的答案

只为“进步”而保存
我对这个问题的解决方案是监视$route属性。
最后得到两个值，即to和from。

watch: {
  '$route'(to, from) {
    const id = to.params.id
    this.AJAXRequest(id)
  }
},

此问题的替代解决方案可在更多情况下处理此情况。

首先，你不应该自己调用mounted()。把你在mounted中做的事情抽象成一个你可以从mounted调用的方法。其次，Vue会在它可以的时候尝试重用组件，所以你的主要问题可能是mounted只被触发过一次。相反，你可以尝试使用updated或beforeUpdate生命周期事件。

const Map = {
  data() {
    return {
      loading: true,
      load: ''
    }
  },
  props: ['dataFile', 'mapFile', 'mapType'],
  methods:{
    drawMap(){
        console.log("do a bunch a d3 stuff")
    }
  },
  updated(){
    console.log('updated')
    this.drawMap()
  },
  mounted() {
    console.log('mounted')
    this.drawMap()
  }
}

这里有一个little example，没有画d3的东西，但是显示了当你交换路由时mounted和updated是如何被触发的。

您可以只使用以下代码：

watch: {
    $route(to, from) {
      // react to route changes...
    }
  }

是的，我遇到了同样的问题，并通过以下方式解决了;

产品详细信息.vue

data() {
    return {
       ...
       productId: this.$route.params.productId,
       ...
     };
   },
 methods: {
  ...mapActions("products", ["fetchProduct"]),
  ...
 },
created() {
    this.fetchProduct(this.productId);
...
}

fetchProduct函数来自Vuex存储。当单击另一个产品时，productId会更改路由参数，但不会重新呈现component，因为created生命周期挂钩在初始化阶段执行。
当我在app.vue父组件文件router-view上添加just键时

应用程序版本

<router-view :key="this.$route.path"></router-view>

现在它对我来说很好用。希望这能帮助Vue开发人员！

我也遇到了同样的问题，但略有不同。我只是在道具上添加了一个手表，然后在道具更改时重新启动了获取方法。

import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Page  from './content/Page.vue';
import Post  from './content/Post.vue';

const props = defineProps({ pageSlug: String });
const pageData = ref(false);
const pageBodyClass = ref('');

function getPostContent() {
    let postRestEndPoint = '/wp-json/vuepress/v1/post/' + props.pageSlug;
    fetch(postRestEndPoint, { method: 'GET', credentials: 'same-origin' })
        .then(res => res.json())
        .then(res => {
            pageData.value = res;
            
        })
        .catch(err => console.log(err));
}
getPostContent();

watch(props, (curVal, oldVal) => {
    getPostContent();
});
watch(pageData, (newVal, oldVal) => { 
    if (newVal.hasOwnProperty('data') === true && newVal.data.status === 404) {
        pageData.value = false;
        window.location.href = "/404";
    }

    
    
});

路由器-索引.js

{
            path: "/:pageSlug",
            name: "Page",
            component: Page,
            props: true,
        },
        {
            path: "/product/:productSlug",
            name: "Product",
            component: Product,
        },
        {
            path: "/404",
            name: "404",
            component: Error404,
        }