Question

下面是Official example的Vue的TodoMVC的。

我想在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()

我不知道如何将这部分代码重写到我的项目中，因为我不知道将其放在哪个文件上以及如何从其他文件访问组件数据。
同时，我使用click方法实现了路由。

<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的解决方案，但是我更想知道如何在不使用它的情况下重写它。

更多，我想知道官方示例中介绍的路由处理有什么好处吗？还是和我上面使用的方法一样？

关于Vue的TodoMVC示例中的路由

0 个答案: