VueJS - 使用动态数据更新 URL

Question

我有一个单页 VueJS 应用程序，其中包含许多我想编码到 URL 中的数据变量。

例如，如果我的路由配置是（我不确定语法是否正确）：

routes: [
    {
        path: '/:foo/:bar/:oof/:rab',
        component: App
    }

组件是：

<script>
export default {
  name: "App",
  data: function() {
    return {
      foo: 1,
      bar: 2,
      oof: 3,
      rab: 4
    }
  }
}

那么 URL 将是 http://www.example.com/#/1/2/3/4

如果foo更改为 9999，URL 将自动更新：http://www.example.com/#/9999/2/3/4

它还可以通过将 URL 值加载到数据中来响应用户更改 URL，或使用不同的 URL 打开应用程序。

我认为这会相对简单，但在谷歌之后，我对正确的处理方式感到非常困惑。

非常感谢任何帮助/示例/解决方案。

Answer 1

无论您使用什么来更改值，都需要触发路由推送。例如

methods: {
  changeFoo (newFoo) {
    // you can set foo but it probably won't matter because you're navigating away
    this.foo = newFoo
    this.$router.push(`/${newFoo}/${this.bar}/${this.oof}/${this.rab}`)
  }

见https://router.vuejs.org/guide/essentials/navigation.html

如果你命名你的路线可能会更容易，例如

routes: [{
  name: 'home',
  path: '/:foo/:bar/:oof/:rab',
  component: App
}]

那么你可以使用类似的东西

this.$router.push({name: 'home', params: this.$data})