javascript - VueJS 中的模型 URL 参数

Question

续 https://stackoverflow.com/a/62859896/4534 ，我只是想操作一个范围输入元素并使用该值更新 URL。

// https://github.com/vuejs/vue-router/blob/dev/examples/route-props/Hello.vue
var Hello = Vue.component('Hello', {
  template: `
  <div>
  <h2 class="hello">Hello {{agility}} {{ $attrs }}</h2>
  <input min=0 max=100 v-model="agility" type="range">
  </div>
  `,
  props: {
    agility: {
      type: Number,
      default: 25
    }
  }
});

const router = new VueRouter({
  // mode: 'history',
  routes: [
    { path: '*', component: Hello, props: true },
    { path: '/:agility', component: Hello, props: true },
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

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

<div id="app"></div>

如果未提供任何值，我希望将默认 25 附加到 URL，例如 https://dabase.com/tips/web/2021/Minimal-VueJS-route-bind/#25
如果有更简单的方法可以在没有 vue-router 的情况下做到这一点，我会全力以赴!

Answer 1

我在没有 vue-router 的情况下解决了它! 👼
在这里，我们使用从 URL 哈希部分获得的数据设置数据:

  created: function() {
    var hash = window.location.hash.substr(1)
    if (hash) {
        this.agility = hash
        }
  },

当数据发生变化时，更新 URL hash 部分

   watch: {
    agility: function (newValue) {
      window.location.hash = newValue
    }
  },