У меня есть одностраничное приложение 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 меня совершенно сбивает с толку правильный способ сделать это.
Любая помощь / примеры / решения приветствуются.
Все, что вы используете для изменения значений, должно запускать маршрут толкать. Например
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})
Кажется, что вы пытаетесь достичь двух вещей, но я не уверен в вашем примере, который идет первым в вашем идеальном порядке операций:
Получение значений из вашего URL
Этого можно добиться с помощью this.$route.params
, который будет объектом, содержащим искомые значения.
Установка URL-адреса на основе ваших переменных foo
, bar
, oof
, rab
Для этого можно использовать this.$router.push()
: документы vue-router