一、底部菜单

转载

mob604756ffc089 2020-04-22 18:37:00

文章标签 ico 地址栏字符串 lua 带参数 文章分类 Java 后端开发

一、导航

1、使用方式

<template>
  <div class="main">
    <div class="contant">
      <router-view />
    </div>
    <div class="footer">
      <nav-bar></nav-bar>
    </div>
  </div>
</template>
<script>
import navBar from "../../components/TabBar";

export default {
  components: {
    navBar
  }
};
</script>

2、nav组件

<template>
  <nav>
    <router-link
      v-for="(item,key) in nav"
      :key="key"
      :to="item.router"
      active-class="active"
      class="tab"
    >
      <i :class="item.class"></i>
      <span>{{item.desc}}</span>
    </router-link>
  </nav>
  
</template>

<script>
export default {
  data() {
    return {
      nav: [
        {
          router: "/index",
          class: "icon-home",
          desc: "首页"
        },
        {
          router: "/loan_evaluate_list",
          class: "icon-service",
          desc: "服务"
        },
        {
          router: "/loan_list",
          class: "icon-find",
          desc: "发现"
        },
        {
          router: "/loan_list",
          class: "icon-personal",
          desc: "我的"
        }
      ]
    };
  }
};
</script>

完善

<template>
  <nav>
    <router-link
      v-for="(item,key) in nav"
      :key="key"
      :to="item.router"
      @click.native="tab_click(key)"
      active-class
      class="nav-item"
    >
      <div class="img">
        <img :src="tabIndex==key?item.activeImg:item.normalImg" />
      </div>
      <span :class="tabIndex==key?'active':''">{{item.desc}}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      nav: [
        {
          router: "/home/index",
          class: "icon-home",
          desc: "首页",
          normalImg: require("../static/icon/index.png"),
          activeImg: require("../static/icon/index-2.png")
        },
        {
          router: "/home/loan_evaluate_list",
          class: "icon-service",
          desc: "评估",
          normalImg: require("../static/icon/assess.png"),
          activeImg: require("../static/icon/assess-2.png")
        },
        {
          router: "/home/loan_list",
          class: "icon-find",
          desc: "进件",
          normalImg: require("../static/icon/entry.png"),
          activeImg: require("../static/icon/entry-2.png")
        },
        {
          router: "/home/loan_repayment_list",
          class: "icon-personal",
          desc: "还款",
          normalImg: require("../static/icon/repayment.png"),
          activeImg: require("../static/icon/repayment-2.png")
        },
        {
          router: "/home/member_my",
          class: "icon-personal",
          desc: "我的",
          normalImg: require("../static/icon/my.png"),
          activeImg: require("../static/icon/my-2.png")
        }
      ]
    };
  },
  mounted() {
    if(sessionStorage.getItem("isSelect"))
    this.tabIndex = sessionStorage.getItem("isSelect");
  },
  methods: {
    tab_click(index) {
      //console.log(index);
      this.tabIndex = index;
      sessionStorage.setItem("isSelect", this.tabIndex);//阻止刷新默认nav
    },
    addUserName() {
      alert("sda");
    }
  },
  watch: {
    /*
    $route(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
    */
  }
};
</script>

<style type="text/css" scoped>
nav {
  display: flex;
  position: fixed;
  bottom: 0;
  height: 56px;
  width: 100%;
  border-top: 1px solid #c0bfc4;
  background: #f7f7fa;
  flex-shrink: 0;
  font-size: 10px;
}
nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #828282;
  text-align: center;
}
nav .nav-item img {
  width: 27px;
  height: 27px;
}
nav .active {
  color: #05a1e7;
}
</style>

二、路由参数

一、<router-link :to="...">
　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

二、router.push(...)方法
　　同样的规则也适用于router.push(...)方法。

// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query，地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query，地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params，地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})