iview刷新之后导航菜单仍然高亮

最新推荐文章于 2022-06-09 18:04:45 发布

一只烛

最新推荐文章于 2022-06-09 18:04:45 发布

阅读量265

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44813417/article/details/109717264

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue应用中使用ivu-design的Menu组件实现响应式导航栏，并展示了如何通过watch路由变化来更新菜单的active状态。通过实例演示了`<router-view>`的使用和路由名称与MenuItem的对应关系。

摘要由CSDN通过智能技术生成

⚠️这里使用了route.name，因此需要注意的是路由中的name和MenuItem中的name相互对应。

<template>
 <div id="app" class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" :active-name="activeIndex" theme="dark" >
          <img class="layout-logo" src="http://cdn-cnc.17zuoye.cn/ucenter/public/skin/default/v5/images/logo-new.png?v=2bee166951" />
          <div class="layout-nav">
              <MenuItem name="home" to="/">
                <Icon type="ios-home"></Icon>
                主页
              </MenuItem>
              <MenuItem name="start" to="start">
                <Icon type="ios-calendar"></Icon>
                页面一
              </MenuItem>
              <MenuItem name="progress" to="progress">
                <Icon type="ios-pie" name="progress"></Icon>
               页面二
              </MenuItem>
              <MenuItem name="model" to="model">
                <Icon type="ios-document"></Icon>
                页面三
              </MenuItem>
              <MenuItem name="resource" to="resource">
                <Icon type="ios-calculator"></Icon>
               页面四
              </MenuItem>
              <MenuItem name="alogs" to="alogs">
                <Icon type="ios-create"></Icon>
                页面五
              </MenuItem>
          </div>
        </Menu>
      </Header>
      <Breadcrumb :style="{padding: '20px 0'}">
      </Breadcrumb>
      <Content :style="{padding: '0 50px'}">
        <Card>
          <div>
            <router-view/>
          </div>
        </Card>
      </Content>
      <Footer class="layout-footer-center">2020 ~ 2021 &copy; lyz</Footer>
    </Layout>
  </div>

</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: this.$route.name
    };
  },
  watch: {
    $route(to, from) {
      this.activeIndex = to.name;
    },
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
 .layout{
   background: #f5f7f9;
   position: relative;
   overflow: hidden;
 }
 .layout-logo{
   width: 100px;
   height: 30px;
   border-radius: 3px;
   float: left;
   position: relative;
   top: 15px;
   left: 20px;
 }
 .layout-nav{
   width: 800px;
   margin: 0 auto;
   margin-right: 20px;
 }
 .layout-footer-center{
   text-align: center;
 }
 .ivu-layout-content{
   min-height: calc(100vh - 173px);
 }

</style>