Про маршрутизацию в TodoMVC на примере Vue - PullRequest
Новая
       37

Про маршрутизацию в TodoMVC на примере Vue

0 голосов
/ 01 февраля 2019

Вот Официальный пример TodoMVC из Vue.

Я хочу переписать этот пример в структурном проекте, созданном vue-cli.Ниже приведена часть структуры моего проекта.

├── src
│ ├── App.vue
│ ├── активы
│ ├── компоненты
│ ├── main.js
│ └── роутер
├── статический
│ └── style.css

У меня проблема при работе с маршрутизацией.

// handle routing
function onHashChange () {
  var visibility = window.location.hash.replace(/#\/?/, '')
  if (filters[visibility]) {
    app.visibility = visibility
  } else {
    window.location.hash = ''
    app.visibility = 'all'
  }
}

window.addEventListener('hashchange', onHashChange)
onHashChange()

Я не знаю, как переписать эту часть кода в свой проект, потому что я не знаю, как поместить ее в какой файл и как получить доступ к данным компонента из других файлов.
Тем временем я достиг своей маршрутизации с помощью метода щелчка. 

<ul class="filters">
   <li><a href="#all" :class="{ selected: visibility == 'all' }" @click="routingTodos('all')">All</a></li>
   <li><a href="#active" :class="{ selected: visibility == 'active' }" @click="routingTodos('active')">Active</a></li>
   <li><a href="#completed" :class="{ selected: visibility == 'completed' }" @click="routingTodos('completed')">Completed</a></li>
</ul>

...

routingTodos (visibility) {
   this.visibility = visibility
}

Я нашел решение с использованием vuex, но я предпочитаю знать, как переписать его без него.

Еще, мне интересноо том, есть ли какая-либо выгода для обработки маршрутизации, представленной в официальном примере?Или то же самое с методом, который я использую выше?

...