vue 导航切换页面

vue  导航切换页面

这是我做出来的效果图，点击可以切换页面的

1.里面<router-view></router-view>是路由，/Attention/AttentionAbout和/Attention/AttentionCollect是跳转页面路径

<div class="padding">
      <div class="attentWarp">
        <div class="attentNav">
          <nav>
            <ul>
              <li class="attentBorder">
                <a
                  :class="{'tabActivity':$route.path==='/Attention/AttentionAbout'}"
                  @click="changeNav('/Attention/AttentionAbout')"
                >关注</a>
              </li>

              <li>
                <a
                  :class="{'tabActivity':$route.path==='/Attention/AttentionCollect'}"
                  @click="changeNav('/Attention/AttentionCollect')"
                >收藏</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="layout">
        <router-view></router-view>
      </div>
       
    </div>

2.

<script>
export default {
  components: {
    
  },
  data() {
    return {
     
    };
  },
  mounted(){
    let nowPath = this.$route.path;
    this.headerTextAction(nowPath);
  },
  methods: {
    changeNav(path) {
      this.$router.replace(path);
      this.headerTextAction(path);
    },
   
    headerTextAction(thisPath){
      if(thisPath ==='/Attention/AttentionAbout'){
        this.headerText = "我的关注"
      }else if(thisPath ==='/Attention/AttentionCollect'){
        this.headerText = "我的收藏"
      }
    }
  }
};
</script>

3.css

.padding {
  padding: 0 0.24rem;
  font-family: PingFangSC-PingFang SC Regular, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 
}
.padding .layout {
  padding: 0.24rem 0.24rem 0 0.24rem;
}
.attentWarp .attentNav .attentBorder {
  border-right: 1px solid #e7eaf0;
}
.attentWarp .attentNav .tabActivity {
  color: #fa7d00;
}
.attentWarp .attentNav ul {
  /* border: 1px solid black; */
  /* border-top: 1px solid #e7eaf0; */
  border-bottom: 1px solid #e7eaf0;
  display: flex;
  padding: 0.24rem 0;
  /* margin-top: 10px; */
}
.attentWarp .attentNav ul li {
  width: 50%;
  text-align: center;
  font-size: 17px;
}
.attentWarp .attentNav .attentBorder .attentAbout {
  border: 1px solid red;
  height: 20px;
}

路由里面还要配置一下，

这个是默认显示页面，Attention是文件夹路径

{ //我的关注页面
      path: '/Attention',
      component: resolve=>require(['@/pages/User/Attention'],resolve),
      children:[   //Attention页面子路由
        {path:"AttentionAbout",name:"AttentionAbout", meta:{isLogin:false},component: resolve=>require(["@/pages/User/AttentionAbout"],resolve)},
        {path:"AttentionCollect",name:"AttentionCollect", meta:{isLogin:false},component: resolve=>require(["@/pages/User/AttentionCollect"],resolve)},
        {path:"/",redirect:"AttentionAbout", meta:{isLogin:false},component: resolve=>require(["@/pages/User/AttentionAbout"],resolve)}
      ]
    },