当用户位于嵌套路由器中时，使链接激活

Question

我试图给特定的链接"事件"访问嵌套视图链接时的活动类。
例如/event/TER63D/tickets，但这似乎不适用于标准的vue路由器。我已经找到了一些解决方案，但这些似乎是旧版本或根本不起作用。

App导航模板

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/event">Event</router-link> (I want this to have the class "active" when visiting /event/TER63D/tickets) 
</nav>
<router-view />
</template>

路由器

const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/event/:id",
name: "eventlist",
component: EventView,
children: [
{
path: "tickets",
component: TicketsView,
},
{
path: "shop",
component: ShopView,
},
],
props: true,
},
{
path: "/404",
name: "404",
component: () => import("../views/NotFoundView.vue"),
},
{
path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
redirect: "/404",
},
];

UPDATE

我让它按我想要的方式工作，但我不知道它是否正确的方式。我是VueJs的新手。

这是更新后的代码。

App导航模板

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :class="currentlyActive[0] === 'event' ? 'router-link-exact-active' : ''" to="/event">Event</router-link> (I want this to have the class "active" when visiting /event/TER63D/tickets) 
</nav>
<router-view />
</template>
<script>
export default {
name: "AppView",
data() {
return {
currentlyActive: "",
};
},
watch: {
$route(to) {
this.currentlyActive = to.name.split(".");
},
},
};
</script>

路由器

const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/event/:id",
name: "event",
component: EventView,
children: [
{
path: "tickets",
component: TicketsView,
name: "event.tickets",
},
{
path: "shop",
component: ShopView,
name: "event.shop",
},
],
props: true,
},
{
path: "/404",
name: "404",
component: () => import("../views/NotFoundView.vue"),
},
{
path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
redirect: "/404",
},
];

Answer 1

这个结构中没有事件路径和页面。

你可以添加像bottom这样的事件路由。

路由器

const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: '/event',
redirect: "/404", // or component: EventList,
children: [
{
path: ":id",
name: "eventlist",
component: EventView,
children: [
{
path: "tickets",
component: TicketsView,
},
{
path: "shop",
component: ShopView,
},
],
props: true,
},
]
},
{
path: "/404",
name: "404",
component: () => import("../views/NotFoundView.vue"),
},
{
path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
redirect: "/404",
},
];

App导航模板

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/event">Event</router-link> (I want this to have the class "active" when visiting /event/TER63D/tickets) 
</nav>
<router-view />
</template>