如果在同一路线中，VueJS 会重新加载

Posted 2023-02-22

【中文标题】如果在同一路线中，VueJS 会重新加载

【英文标题】：VueJS reload if in the same route

【发布时间】：2019-04-11 01:20:12

【问题描述】：

我们希望如果我们点击同一页面的router-link，页面会重新加载。

如何做到这一点？如果页面保持不变，watch->$route 不会调用

【问题讨论】：

我不确定这是否是您想要实现的目标：***.com/questions/52847979/…

@Jns 路线保持不变，所以这行不通

【参考方案1】：

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

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

其中“id”来自 /myroute/:id 并且 find() 是一个常规方法。

【讨论】：

js/vue/trip 的亮点 :clap :clap XD

【参考方案2】：

您可以使用“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()
     
   

【讨论】：

如果用户与他刚刚点击的链接位于同一页面上，我不确定是否会调用钩子

【参考方案3】：

考虑在<router-link> 上使用@click（或@click.native）以在用户单击海关代码时执行它。

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

我现在没有可用的 Vue.js 项目来测试它，所以如果 @click(.native) 方法不起作用，因为 <router-link> 是一个伪组件，只需将事件侦听器应用于新创建的自定义组件。

【参考方案4】：

其中一个选项是在 RouterView 上使用 key：

<RouterView :key="whenThisVarChangeRouterViewWillBeRemounted" />

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

:key="$router.fullPath"

这将保证在每次更改路径时重新挂载。

【参考方案5】：

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

:key="$route.fullPath"

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

【参考方案6】：

2021 年 12 月更新：

您可以通过添加 :key="$route.fullPath" 来强制重新加载组件。

对于子组件：

<Child :key="$route.fullPath" />

对于router-view标签：

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

但是，:key="$route.fullPath" 只能强制重载不同路由的组件，不能强制重载同一路由的组件。为了能够强制重新加载同一路由的组件，我们需要将"value"与数组添加到:key="$route .fullPath" 和更改“值”。所以它变成了:key="[$route.fullPath, value]"，我们需要改变“value”。

*我们可以将 Array 分配给 :key=。

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default 
  name: "Parent", components:  Child, ,
  data() 
    return 
      value: 0,
    ;
  ,
  methods: 
    reload() 
      this.value++;
    
  

</script>

但是，为了继续使用 $route.fullPath 和 value 有时会导致一些错误，所以只有当像 Click 这样的事件发生时，我们同时使用 $route.fullPath 和 value。除了像 Click 这样的事件发生时，我们总是只需要使用 $route.fullPath。

这是最终代码：

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default 
  name: "Parent", components:  Child, ,
  data() 
    return 
      state: true,
      value: 0,
    ;
  ,
  methods: 
    reload() 
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    
  

</script>

不幸的是，在 Vue 中没有简单的方法可以正确地强制重新加载组件。这就是Vue需要解决的问题。

【讨论】：

对我来说，在router-view 上使用密钥的解决方案破坏了保持活动功能。 IE。每次都会重新加载页面。

编辑：当router-view 与keep-alive 结合使用时，key 必须放在component 本身上，如本答案中所述***.com/questions/66215625/…

【参考方案7】：

这就是你要找的Vue-Router Navigation Guards

【讨论】：

谢谢，之前试过 - 如果路线保持不变，它们不会触发

【参考方案8】：

如果你可以在一个组件中将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。

【讨论】：

这将如何影响浏览器历史记录和 URL？