Vue router-link精确活动类

时间:2017-08-20 02:36:07

标签: javascript vue.js vuejs2 vue-router

我有3个菜单标签(即router-link s),对应3条不同的路线:

/        --> home
/users   --> users
/posts   --> posts

转到router-link的第一个/已应用exact属性,因此在/users/posts时,它不会收到有效课程。这适用于大多数情况,但我计划在/路由上允许查询参数。例如:

/?ref=producthunt

在这种情况下,/ router-link仍应有效。但是,如果我有exact属性,则它与url不匹配ref查询参数。除了向我的组件添加额外的逻辑以测试路由和翻转类之外,我可以使用router-link组件的某些功能来解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

如果您想使用router-link导航到' /'使用ref查询参数,为什么不在ref中将router-link设置为查询属性?它仍然适用于exact

<router-link :to="{ path: '/', query: { ref: 'producthunt' } }" exact>home</router-link>

检查demo here

<强>更新
如果您在谈论vue-router的设置问题,我认为像http://example.com/?ref=producthunt这样的网址会自动定向到主网络组件,而不需要任何高级配置,因为没有像{{exact这样的参数1}}在它的api中(我试过刚刚在vue-cli构建的vuejs2 + webpack项目中)。如果它没有被引导到你家,我想知道在服务器应用程序的配置等其他地方是否有任何问题。