VueJS - обновление URL динамическими данными - PullRequest
Новая
       4

VueJS - обновление URL динамическими данными

0 голосов
/ 13 сентября 2018

У меня есть одностраничное приложение 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 я совершенно сбит с толку правильным подходом к этому.

Любая помощь / примеры / решения приветствуются.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Кажется, что вы пытаетесь достичь двух вещей, но я не уверен из вашего примера, который стоит первым в вашем идеальном порядке операций:

  • Получение значений из вашего URL

    Этого можно достичь с помощью this.$route.params, который будет объектом, содержащим значения, которые вы ищете.

  • Настройка URL на основе ваших foo, bar, oof, rab переменных

    Вы можете использовать this.$router.push() для этого: Документы Vue-Router

0 голосов
/ 13 сентября 2018

Все, что вы используете для изменения значений, потребуется для запуска маршрута 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

Может быть проще, если вы назовете свой маршрут , например 

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

тогда вы можете использовать что-то вроде 

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