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

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

6
BaronGrivet 13 Сен 2018 в 05:38

2 ответа

Лучший ответ

Все, что вы используете для изменения значений, должно запускать маршрут 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})
6
Phil 13 Сен 2018 в 03:04

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

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

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

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

    Для этого можно использовать this.$router.push(): vue-router docs

0
Nico 13 Сен 2018 в 02:55