window.location을 사용하도록 강제 적용.href(vue-properties 해시 모드)

window.location을 사용하도록 강제 적용.href(vue-properties 해시 모드)

사용하고 있다.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, 이런 경우에?

사용할 필요 없음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>

자바스크립트

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을 참고하면 된다.

참조URL: https://stackoverflow.com/questions/59433194/force-to-use-window-location-href-in-vue-router-hash-mode