Question

这是我的路线设置。

routes:[
{
  path: "/test/:area/mybox/:address/:id/:box",
  name: "BoxManage",
  component: () => import(/* webpackChunkName: "box" */ "@/views/BoxManage.vue"),
  props: true,
  children: []
},
{
  path: "/test/:area/mybox/:address/:id/:box/detail/:port",
  name: "BoxDetail",
  component: () => import(/* webpackChunkName: "box" */ "@/views/BoxDetail.vue"),
  props: true,
  children: []
}
]

模板中有一些代码

<v-btn to="/test/111/mybox/222/333/444"> Manage </v-btn>
<v-btn to="/test/111/mybox/222/333/444/detail/1"> Detail </v-btn>

单击“详细信息”按钮后，“管理”按钮会同时点亮。这意味着这两个按钮是同一条路径吗？它的路径不应该相同，我的代码中是否有任何错误？

Answer 1

您可以使用router-link的{{1}}安装像这样：

<v-btn>

您可以根据需要添加任何参数，例如^ _ ^

Answer 2

您没有使用exact。 exact匹配链接。没有这个，“ /”将匹配所有路由。您可以在vue-router documentation about exact上找到有关确切道具的更多信息。

因此您必须将其更改为以下代码行：

<v-btn to="/test/111/mybox/222/333/444" exact> Manage </v-btn>

<v-btn to="/test/111/mybox/222/333/444/detail/1" exact> Detail </v-btn>

如果您需要使用自定义活动课程，则可以使用exact-active-class。示例：

<v-btn to="/test/111/mybox/222/333/444/detail/1" exact exact-active-class="custom-active-class"> Detail </v-btn>

P / S：您最好使用name而不是完整的URL。 <v-btn to="{ name: ''yourURLName }" exact exact-active-class="custom-active-class"> Detail </v-btn>

Vue-Route路径比较issus

2 个答案: