Vue2.0+ElementUI router页面跳转子路径问题

 

 

 

<template>
  <div class="bottom-navbar">
    
    <el-row :gutter="32">
      <el-col :xs="8" :sm="8" :lg="8">
        <div class="bottom-button" @click="showWorkbench">
            <i class="el-icon-s-home" style="color:#fff;" />
            <div>
                <a class="bottom-button-text">工作台</a>
            </div>
        </div>
      </el-col>
      
      <el-col :xs="8" :sm="8" :lg="8">
        <div class="bottom-button" @click="showStatistics">
            <i class="el-icon-s-data" style="color:#fff;" />
            <div>
                <a class="bottom-button-text">统计</a>
            </div>
        </div>
      </el-col>

      <el-col :xs="8" :sm="8" :lg="8">
        <div class="bottom-button" @click="showDiscover">
            <i class="el-icon-discover" style="color:#fff;" />
            <div>
                <a class="bottom-button-text">发现</a>
            </div>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  name: 'BottomPanel',
  data() {
    return {
      show: false
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  },
  watch: {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    //工作台
    showWorkbench(){
      // this.$router.push('/');
      this.$router.push('/dashboard1');
    },
    //统计
    showStatistics(){
      // this.$router.push('/dashboard');
      this.$router.push('/admin/statistics');
    },
    //发现
    showDiscover(){
      // this.$router.push('/documentation');
      this.$router.push('/admin/discover');
    },
  }
}
</script>

<style lang="scss" scoped>
  .bottom-navbar{
    position:fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #304156;
  }

  .bottom-button{
    background-color: rgba(0, 0, 0, .05); 
    width: 30%;
    height: 100%;
    margin: 8px auto; 
    text-align: center;
  }

.bottom-button-text{
  color: #fff;
  outline: none;//去除外轮廓,outline:none;表示使outline属性无效,使绘制于元素周围的一条线无效。
  font-size: 12px;
}

.bottom-button:hover{
  .bottom-button-text,i{
    color: #36a3f7 !important;
  }
}


</style>

  {
    path: '/',//主页路径
    component: Layout,
    redirect: '/dashboard1',
    children: [
      {
        path: 'dashboard1',
        component: () => import('@/views/dashboard-black/index'),
        name: 'Dashboard1',
        meta: { title: '数据看板', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/admin/statistics',
    component: Layout,
    redirect: {name :'statistics'},
    children: [
      {
        path: 'statistics',
        component: () => import('@/views/dashboard-black/admin/statistics'),
        name: 'statistics',
        meta: { title: '统计', icon: 'chart', affix: true }
      }
    ]
  },
  {
    path: '/admin/discover',
    component: Layout,
    redirect: {name :'discover'},
    children: [
      {
        path: 'discover',
        component: () => import('@/views/dashboard-black/admin/discover'),
        name: 'discover',
        meta: { title: '发现', icon: 'nested', affix: true }
      }
    ]
  },

相关推荐

  1. vue怎么页面

    2023-12-08 23:34:04       41 阅读
  2. 加载页面 转 新页面 vue

    2023-12-08 23:34:04       41 阅读
  3. Vue3+ts实现页面转及参数传递

    2023-12-08 23:34:04       418 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-08 23:34:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-08 23:34:04       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-08 23:34:04       87 阅读
  4. Python语言-面向对象

    2023-12-08 23:34:04       96 阅读

热门阅读

  1. C语言文本模式和二进制模式

    2023-12-08 23:34:04       59 阅读
  2. Opencv获取笔记本摄像头

    2023-12-08 23:34:04       53 阅读
  3. 跨框架解决方案-Mitosis【Context】

    2023-12-08 23:34:04       64 阅读
  4. vue在哪个生命周期内调用异步请求

    2023-12-08 23:34:04       54 阅读
  5. 【算法专题】分治 - 快速排序

    2023-12-08 23:34:04       40 阅读
  6. 合并表记录

    2023-12-08 23:34:04       56 阅读
  7. 【例1.6】回文数(Noip1999)

    2023-12-08 23:34:04       58 阅读
  8. Mysql日志binlog、redolog、undolog

    2023-12-08 23:34:04       48 阅读