Я использую vue-router 3.0.1, а режим - hash.

Текущий URL:

/#/?type=1

Я пытался использовать window.location.href для того же пути, но другого параметра запроса, как этот.

window.location.href = '/#/?type=2';

Но URL браузера меняется, но больше ничего не происходит.

Во-первых, я пытаюсь это сделать, потому что router.push не выполнил повторную визуализацию компонента.

Оригинал window.location.href должен дать другой результат, но vue-router выглядит как переопределение window.location.href.

Как я могу заставить перейти к /#/?type=2, в этом случае?

1
Jeongyong Lee 21 Дек 2019 в 06:05

1 ответ

Лучший ответ

Вам не нужно использовать window.location.href, чтобы он работал. Проблема здесь в том, что компонент повторно используется, когда вы обновляете только параметр запроса, и компонент не будет повторно визуализироваться автоматически. Один из способов решить эту проблему - наблюдать за маршрутом $ в вашем компоненте. Вот пример кода. Вы также можете найти jsFiddle здесь https://jsfiddle.net/Fourzero/cbnom5sL/22/.

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <!-- You can use router-link to trigger the url change or router.push in your code -- it doesn't matter. -->
  <router-link to="/?type=2">type 2</router-link>
  <router-link to="/?type=1">type 1</router-link>

  <router-view></router-view>
</div>

JavaScript

const Bar = { 
  template: '<div>Type {{type}}</div>',
  data () {
    return { 
      type: ''
    }
  },

  mounted () {
    this.type = this.$route.query.type;
  },

  watch: {
    $route(to, from) {
      // Update the data type when the route changes. 
      this.type = to.query.type;
    }
  } 
}

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '', component: Bar },

  ]
})

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

Подробное объяснение можно найти в официальном документе https: //router.vuejs. org / guide / essentials / dynamic-matching.html.

0
lenglei 2 Янв 2020 в 22:55