Question

我在此pull request中看到了：

添加router.reload()

重新加载当前路径并再次调用数据挂钩

但是当我尝试从Vue组件发出以下命令时：

this.$router.reload()

我收到此错误：

Uncaught TypeError: this.$router.reload is not a function

我在docs搜索，但找不到任何相关内容。 vue / vue-router是否提供了这样的功能？

我感兴趣的软件版本是：

"vue": "^2.1.0",
"vue-router": "^2.0.3",

PS。我知道location.reload()是其中一种选择，但我正在寻找原生的Vue选项。

Answer 1

this.$router.go()就是这样做的;如果未指定参数，路由器将导航到当前位置，刷新页面。

至于＆＃39;为什么会如此＆＃39;：go在内部将其参数传递给window.history.go，所以它等于windows.history.go() - 反过来，它会重新加载页面，按照MDN doc。

_{注意：因为这会执行＆＃34; soft＆＃34;在常规桌面（非便携式）Firefox上重新加载，如果你使用它可能会出现一些奇怪的怪癖，但实际上你需要真正的重新加载;使用OP提到的window.location.reload(true);（https://developer.mozilla.org/en-US/docs/Web/API/Location/reload）可能有所帮助 - 它确实解决了我在FF上的问题。}

Answer 2

我在GitHub上检查了vue-router repo，似乎还没有reload()方法。但是在同一个文件中有：currentRoute对象。

来源：vue-router/src/index.js
文档：docs

get currentRoute (): ?Route {
    return this.history && this.history.current
  }

现在您可以使用this.$router.go(this.$router.currentRoute)重新加载当前路线。

简单example。

这个答案的版本：

"vue": "^2.1.0",
"vue-router": "^2.1.1"

Answer 3

最简单的解决方案是将：key属性添加到：

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

这是因为，如果要寻址相同的组件，Vue Router不会注意到任何更改。使用该键，对路径的任何更改都将触发使用新数据重新加载组件。

Answer 4

router.js

routes: [
{
  path: '/',
  component: test,
  meta: {
    reload: true,
  },
}]

main.js

import router from './router';

new Vue({
  render: h => h(App),
  router,
  watch:{
    '$route' (to) {
       if(to.currentRoute.meta.reload==true){window.location.reload()}
   }
 }).$mount('#app')

Answer 5

如果使用Typescript，则使用router.go(0)，它会询问go方法的参数。

Answer 6

这是我的充值。由于某些浏览器很奇怪。 location.reload无法重新加载。

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}

<router-view v-if="isRouterAlive"/>

Answer 7

解析到URL的路由，并使用Javascript导航窗口。

        let r = this.$router.resolve({
        name: this.$route.name, // put your route information in
        params: this.$route.params, // put your route information in
        query: this.$route.query // put your route information in
      });
      window.location.assign(r.href)

此方法替换URL，并使页面执行完整请求（刷新），而不是依赖Vue.router。即使从理论上来说，$ router.go也不适合我。

Answer 8

`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

我已经尝试过重新加载当前页面。

Answer 9

如果您只想更新页面上的某些组件，这里有一个解决方案：

在模板中

<Component1 :key="forceReload" />
<Component2 :key="forceReload" />

在数据中

data() {
  return {
    forceReload: 0
  {
}

在方法中：

   Methods: {
     reload() {
        this.forceReload += 1
     }
   }

使用唯一键并将其绑定到要更新的每个组件的数据属性（我通常只需要为单个组件使用此键，最多两个。如果您需要更多，我建议使用刷新整个页面其他答案。

我从 Michael Thiessen 的帖子中了解到这一点： https://medium.com/hackernoon/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

Answer 10

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                          + window.location.search);
}


App.$router.replace({name:"my-route", hash: '#update'})
App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} })
setTimeout(removeHash, 0)

注意：

#之后必须具有一些值。
第二个路由哈希是一个空格，而不是空字符串。
setTimeout，而不是$nextTick，以保持网址整洁。

Answer 11

要重新渲染，可以在父组件中使用

/*
*   This content is licensed according to the W3C Software License at
*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
(function () {
  var tablist = document.querySelectorAll('[role="tablist"]')[0];
  var tabs;
  var panels;

  generateArrays();

  function generateArrays () {
    tabs = document.querySelectorAll('[role="tab"]');
    panels = document.querySelectorAll('[role="tabpanel"]');
  };

  // For easy reference
  var keys = {
    end: 35,
    home: 36,
    left: 37,
    up: 38,
    right: 39,
    down: 40,
    delete: 46,
    enter: 13,
    space: 32
  };

  // Add or substract depenign on key pressed
  var direction = {
    37: -1,
    38: -1,
    39: 1,
    40: 1
  };

  // Bind listeners
  for (i = 0; i < tabs.length; ++i) {
    addListeners(i);
  };

  function addListeners (index) {
    tabs[index].addEventListener('click', clickEventListener);
    tabs[index].addEventListener('keydown', keydownEventListener);
    tabs[index].addEventListener('keyup', keyupEventListener);

    // Build an array with all tabs (<button>s) in it
    tabs[index].index = index;
  };

  // When a tab is clicked, activateTab is fired to activate it
  function clickEventListener (event) {
    var tab = event.target;
    activateTab(tab, false);
  };

  // Handle keydown on tabs
  function keydownEventListener (event) {
    var key = event.keyCode;

    switch (key) {
      case keys.end:
        event.preventDefault();
        // Activate last tab
        focusLastTab();
        break;
      case keys.home:
        event.preventDefault();
        // Activate first tab
        focusFirstTab();
        break;

      // Up and down are in keydown
      // because we need to prevent page scroll >:)
      case keys.up:
      case keys.down:
        determineOrientation(event);
        break;
    };
  };

  // Handle keyup on tabs
  function keyupEventListener (event) {
    var key = event.keyCode;

    switch (key) {
      case keys.left:
      case keys.right:
        determineOrientation(event);
        break;
      case keys.delete:
        determineDeletable(event);
        break;
      case keys.enter:
      case keys.space:
        activateTab(event.target);
        break;
    };
  };

  // When a tablistâ€™s aria-orientation is set to vertical,
  // only up and down arrow should function.
  // In all other cases only left and right arrow function.
  function determineOrientation (event) {
    var key = event.keyCode;
    var vertical = tablist.getAttribute('aria-orientation') == 'vertical';
    var proceed = false;

    if (vertical) {
      if (key === keys.up || key === keys.down) {
        event.preventDefault();
        proceed = true;
      };
    }
    else {
      if (key === keys.left || key === keys.right) {
        proceed = true;
      };
    };

    if (proceed) {
      switchTabOnArrowPress(event);
    };
  };

  // Either focus the next, previous, first, or last tab
  // depening on key pressed
  function switchTabOnArrowPress (event) {
    var pressed = event.keyCode;

    if (direction[pressed]) {
      var target = event.target;
      if (target.index !== undefined) {
        if (tabs[target.index + direction[pressed]]) {
          tabs[target.index + direction[pressed]].focus();
        }
        else if (pressed === keys.left || pressed === keys.up) {
          focusLastTab();
        }
        else if (pressed === keys.right || pressed == keys.down) {
          focusFirstTab();
        };
      };
    };
  };

  // Activates any given tab panel
  function activateTab (tab, setFocus) {
    setFocus = setFocus || true;
    // Deactivate all other tabs
    deactivateTabs();

    // Remove tabindex attribute
    tab.removeAttribute('tabindex');

    // Set the tab as selected
    tab.setAttribute('aria-selected', 'true');

    // Get the value of aria-controls (which is an ID)
    var controls = tab.getAttribute('aria-controls');

    // Remove hidden attribute from tab panel to make it visible
    document.getElementById(controls).removeAttribute('hidden');

    // Set focus when required
    if (setFocus) {
      tab.focus();
    };
  };

  // Deactivate all tabs and tab panels
  function deactivateTabs () {
    for (t = 0; t < tabs.length; t++) {
      tabs[t].setAttribute('tabindex', '-1');
      tabs[t].setAttribute('aria-selected', 'false');
    };

    for (p = 0; p < panels.length; p++) {
      panels[p].setAttribute('hidden', 'hidden');
    };
  };

  // Make a guess
  function focusFirstTab () {
    tabs[0].focus();
  };

  // Make a guess
  function focusLastTab () {
    tabs[tabs.length - 1].focus();
  };

  // Detect if a tab is deletable
  function determineDeletable (event) {
    target = event.target;

    if (target.getAttribute('data-deletable') !== null) {
      // Delete target tab
      deleteTab(event, target);

      // Update arrays related to tabs widget
      generateArrays();

      // Activate the closest tab to the one that was just deleted
      if (target.index - 1 < 0) {
        activateTab(tabs[0]);
      }
      else {
        activateTab(tabs[target.index - 1]);
      };
    };
  };

  // Deletes a tab and its panel
  function deleteTab (event) {
    var target = event.target;
    var panel = document.getElementById(target.getAttribute('aria-controls'));

    target.parentElement.removeChild(target);
    panel.parentElement.removeChild(panel);
  };

  // Determine whether there should be a delay
  // when user navigates with the arrow keys
  function determineDelay () {
    var hasDelay = tablist.hasAttribute('data-delay');
    var delay = 0;

    if (hasDelay) {
      var delayValue = tablist.getAttribute('data-delay');
      if (delayValue) {
        delay = delayValue;
      }
      else {
        // If no value is specified, default to 300ms
        delay = 300;
      };
    };

    return delay;
  };
}());

Answer 12

这就是我的方法！

methods:
{
        reload()
        {
            var location = this.$route.fullPath

            this.$router.replace('/')

            this.$nextTick(() => this.$router.replace(location))
        }
}

Answer 13

react-native-fetch-blob

为什么不使用forceUpdate方法？

我们有vue-router

13 个答案: