vue导航栏avtive样式子页面失效

Question

代码如下

          <template>
                <li>
                    <nuxt-link to="/"  :class="{'active':isActive }">首页</nuxt-link>
                </li>
                <li>
                    <a href="https://qiu006.com/zuqiu">足球比分</a>
                </li>
                <li>
                    <a href="https://qiu006.com/lanqiu">篮球比分</a>
                </li>
                <li>
                    <nuxt-link to="/tuijian">每日精推</nuxt-link>
                </li>
           </template>



            <script>
                export default {
                    data(){
                        return{
                            isActive:true,
                        }
                    }
                }
            </script>

这时候我需要再/tuijian目录下新增子页面,但是路由跳转子页面这个导航栏选中的active样式(选中底色是红色)就没了;

            <p class="more">
                      <a href="/tuijian/dashen">查看更多<img src="../static/image/more2.png"></a>
            </p>

Answer 1

获取this.$route.matched,循环做判断当前路由是否存在tuijian