调用过滤函数的vuejs路由

时间:2016-02-24 20:42:12

标签: vue.js

我创建了一个vuejs页面,显示了www.mydomain.com/articles上的文章列表。这些可以通过标签列表过滤。单击标记后,将调用自定义筛选器并更新文章。这很有效。

我现在想知道是否可以通过声明路由并将路由参数传递给过滤器来链接到预过滤的页面? 即访问www.mydomain.com/articles/#/tag1 将显示标记为'tag1'

的预过滤的文章列表

VueJs路由器似乎谈论使用路由器的单页应用程序,但我希望链接到我网站上的页面。

我错过了什么或在这里愚蠢吗?如果是这样,抱歉问。

1 个答案:

答案 0 :(得分:1)

您将拥有一条未经过滤的文章,使用名为eg的组件"文章",以及第二条路线,它也使用文章组件,但带有标签:

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,其中包含来自网址的标记(如果有的话),您可以将其用于过滤器。