调用过滤器函数的 Vuejs 路由

Question

我创建了一个 vuejs 页面，在 www.mydomain.com/articles 处显示文章列表。 这些可以通过标签列表进行过滤。 单击标记时，将调用自定义筛选器并更新文章。 这很好用。

我现在想知道我是否可以通过声明路由并将路由参数传递到过滤器中来链接到预过滤页面？J.F. 访问 www.mydomain.com/articles/#/tag1将显示标记为"tag1"的文章的预过滤列表

VueJs 路由器似乎在谈论使用路由器的单页应用程序，但我希望从我的站点链接到该页面。

我在这里错过了什么还是很愚蠢？如果是这样，很抱歉问。

Answer 1

您将有一条路由是未过滤的文章，使用名为"Articles"的组件，以及另一条路由，它也使用文章组件，但带有标签：

var Articles = Vue.extend({ ... })
var router = new VueRouter({root: '/articles'})
router.map({
  '/': {component: Articles } // matches '/articles/'
  '/:tag': {component: Articles } // matches '/articles/#/someTag'
})

现在，在该文章组件的模板中，您可以访问 $route.params.tag ，它将包含来自 url 的标记（如果有），您可以将其用于过滤器。