每当子路由路径为空路径时，将第一个子路由设为活动类答案

【问题标题】：Make the first child route as the active class whenever the sub-route path is an empty path每当子路由路径为空路径时，将第一个子路由设为活动类
【发布时间】：2017-07-13 12:43:33
【问题描述】：

我有一个带有一些链接的主导航导航栏。在主页，即根路径（'/'）中，我有嵌套（子）路由。

路线配置：

const routes = [
    {path: '/', component: HomeMainContent, children: [
            {path: '', component: MovieList},
            {path: 'in-theaters', component: MovieList},
            {path: 'coming-soon', component: ComingSoonList},
            {path: 'trailers', component: TrailerList},
    ]},
    {path: '/about', component: About},
    {path: '/contact',component: Contact},
];

所以当根路径('/')激活时，它的子路由器根路径('')被激活。

子组件路由的模板是这样的：

<template>
    <div id="homeSubMenuWrapper">
        <ul id="subMenuList">
            <li v-for="menu in menuList">
                <router-link class="menuItem" :to="menu.path">{{menu.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                menuList: [
                    {name: 'IN THEATER', path: '/in-theaters'},
                    {name: 'COMING SOON', path: '/coming-soon'},
                    {name: 'TRAILERS', path: '/trailers'},
                ]
            }
        }
    }
</script>

由于路径 ('') 和 ('in-theaters') 具有相同的组件，我想让路径 ('in-theaters') 的路由器链接在子路径 ('') 时具有 router-link-active 的类其父路径('/') 处于活动状态。我该怎么做？

意味着只要子路由路径为空路径('')，第一个子路由('in-theaters') 就应该有活动类。

【问题讨论】：

您可以通过在计算属性中检查 this.$router 和 this.$route 来做各种事情。
@Potray 谢谢，我会检查的。

标签： vue.js vuejs2 vue-router

【解决方案1】：

在@Potray 的建议下，我最终检查了模板内的 $route.path 和子路径。

<template>
    <div id="homeSubMenuWrapper">
        <ul id="subMenuList">
            <li v-for="menu in menuList">
                <router-link  :class="[$route.fullPath ==='/' && menu.path === '/in-theaters' ? 'menuItem router-link-active' : 'menuItem']" :to="menu.path">{{menu.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

【讨论】：