I'm trying to give the specific link "Event" an active class when visiting a nested view link.
For example /event/TER63D/tickets
but that doesn't seem to work with the standard vue router. I've found some solutions but these seem to be for older versions or simply don't work.
应用导航模板
<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",
},
];
100
我让它以我想要的方式工作,但我不知道这是不是正确的方式.我对VueJs非常陌生.
这是更新后的代码.
应用导航模板
<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",
},
];