Vue router-link 完全活跃 class

Question

我有 3 个菜单选项卡（即 router-links）对应 3 条不同的路线：

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

前往 / 的第一个 router-link 已应用 exact 属性，因此在 [=18] 时不会收到活动的 class =] 或 /posts。这适用于大多数情况，但是我计划在 / 路由上允许查询参数。例如：

/?ref=producthunt

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

Answer 1

如果您想使用 router-link 通过 ref 查询参数导航到“/”，为什么不直接将 ref 设置为 [=12 中的查询属性 =]？它仍然适用于 exact。

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

检查 demo here。

已更新
如果你说的是 vue-router 的设置问题，我认为 url 像 http://example.com/?ref=producthunt 会自动定向到 home 组件而无需任何高级配置，因为没有像 exact 这样的参数在它的api中（我刚才在一个vue-cli搭建的vuejs2+webpack项目中试过）。如果不是发到你家，不知道是不是服务器应用配置等其他地方有问题

Vue router-link 完全活跃 class

Vue router-link exact active class

javascript

vue.js

vue-router

vuejs2