Vue监听路由跳转watch

749 阅读1分钟
                    <template>
                      <div>
                        <section class="pc">

                            <ul class="head_list" v-for="(item,indx) in memu" :key="indx">
                              <li :class="topath==item.path?'xz':''">
                                <router-link :to="item.path">{{item.name}}</router-link>
                              </li>
                            </ul>
                        
                        </section>
                      </div>
                    </template>
                   
                    <script>
                    export default {
                      name: "Header",
                      data() {
                        return {
                          memu: [
                            {
                              name: "首页",
                              path: "/"
                            },
                            {
                              name: "公司注册",
                              path: "/About"
                            },
                            {
                              name: "列表页",
                              path: "/Lb"
                            }
                          ],
                          topath:''
                        };
                      },
                      watch: {
                        $route: {
                          immediate: true,
                          handler: function(val, oldVal) {
                            this.topath=val.path
                          }
                        }
                      }
                    };
                    </script>

                    <style scoped>

                    .xz {
                      color: #014898;
                      border-bottom: 2px solid #014898;
                      padding-bottom: 10px;
                    }
                    </style>