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的应用程序。

我认为这相对来说比较简单，但是在Google之后，我对正确的处理方式完全感到困惑。

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

Answer 1

无论您使用什么方式更改值，都需要触发路由 push 。例如

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

如果您name your route，例如

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

那么您可以使用类似的

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

VueJS-使用动态数据更新URL

1 个答案: