VueJS：父路由链接上的活动类不起作用

Question

我是 VueJS 的新手，我正在尝试在父 static 上添加一个 active 类，但它不起作用。

这是我的代码：

router-link

App.vue

/**
 * Components
 */
import ProductTemplate from './Pages/Product/Template';
import Products from './Pages/Product/Index';
import ProductCreate from './Pages/Product/Create';

import Categories from './Pages/Category/Index';

export default new VueRouter({
    mode: 'history',
    linkActiveClass: "active",
    linkExactActiveClass: "active",
    routes: [{
        path: '/',
        component: ProductTemplate,
        children: [{
            name: 'product-index',
            path: '/',
            component: Products
        }, {
            name: 'product-create',
            path: 'create',
            component: ProductCreate
        }]
    }, {
        path: '/categories',
        component: Categories
    }, {
        path: "*",
        redirect: { 'name': 'product-index' }
    }]
});

产品/Template.vue

<template>
    ...

    <ul>
        <router-link tag="li" :to="{'name':'product-index'}" exact>Products</router-link>
        <router-link tag="li" :to="{'name':'category-index'}">Categories</router-link>
    </ul>

    ...
</template>

<script type="text/javascript">
export default {
    name: "App"
}
</script>

产品/Index.vue

<template>
    <router-view />
</template>

<script type="text/javascript">
export default {
    name: 'ProductTemplate'
}
</script>

我已经尝试过其他解决方案，甚至阅读了文档，但没有成功。