Question

我们希望如果单击同一页面上的router-link，该页面将重新加载。

那怎么办？如果页面保持不变，"An exception has been thrown"不会调用

Answer 1

您可以使用“ beforeEnter” Doc.

   { 
     path: '/foo', component: Foo,
     beforeEnter: (to, from, next) => {
       /*
        todo check if to === from
        Warning!: location.reload()  completely destroy all vuejs stored states
        */
        window.location.reload()
        return next()
     }
   }

Answer 2

请考虑在用户点击@click时使用@click.native（或<router-link>）来执行您的海关代码。

现在这似乎是个坏主意，因为您将不得不在任何组件中的每个<router-link>上使用该方法。一种解决方案是将<router-link>伪组件与另一个名为routerLink == <router-link>的组件方便地包装！我已经对原始的<transition>组件进行了类似的操作，并且它就像一个魅力。这并不能解决必须导入该组件并将其在需要<router-link>的所有组件中使用的问题，但这意味着您拥有一个集中的位置，可以为单击事件添加自定义逻辑，而无需重复再次对其进行修改，或在需要时在多个位置进行修改。

我目前没有可用的Vue.js项目可以对此进行测试，因此如果@click(.native)是伪组件，则<router-link>方法不起作用，只需应用事件侦听器到新创建的自定义组件。

Answer 3

如果由于路由参数更改而仅需要“刷新”组件，请尝试以下操作：

// define a watcher 
watch: {
    "$route.params.id"(val) {
      // call the method which loads your initial state
      this.find();
    },
},

其中“ id”来自/ myroute /：id，而find（）是常规方法。

Answer 4

这就是您要寻找的Vuew-Router Navigation Guards

Answer 5

其中一种选择是在RouterView上使用密钥：

<RouterView :key="whenThisVarChangeRouterViewWillBeRemounted" />

如果您不想在每次路由器视图更改中都重新加载，请确保将密钥放入明智的位置，否则可以使用：

:key="$router.fullPath"

这将保证在每次更改路径时都重新安装。

Answer 6

如果您可以在组件中将route-link修改为this.$router.push，并且如果您不想像window.location.reload()那样重新加载整个页面，请考虑推送一条不存在的路由，然后按下立即选择同一条路线。

this.$router.push({ name: 'not existing' })
this.$router.push({ name: yourRouteName })

副作用：Vue将在控制台中警告：[vue-router] Route with name 'not existing' does not exist。

Answer 7

为我工作:) 在路由器视图中设置以下代码

:key="$route.fullPath"

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

VueJS重新加载（如果在同一路径中）

7 个答案: