页面切换问题

src/components/Breadcrumb/index.vue

    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
        <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
        <router-link v-else :to="item.redirect||item.path" replace>{{item.meta.title}}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script>
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
export default {
  created() {
    this.getBreadcrumb()
      levelList: null
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  watch: {
    $route() {
      this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      if (this.roles.indexOf('1') >= 0) {
        const first = matched[0]
        if (first && first.name !== 'dashboard') {
          matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
        }
      } else {
        const firstF = matched[1]
        if (firstF && firstF.name !== 'bridgeHome') {
          matched = [{ path: 'bridgeHome', meta: { title: '主页' }}].concat(matched)
      const bridgeName = Cookies.get('bridgeName')
      let matched = this.$route.matched.filter(item => {
        if (bridgeName && item.path === '/bridgeHome') {
          item.meta.title = bridgeName
        }
        return item.name
      })
      const first = matched[0]
      if (first && first.name !== 'dashboard') {
        matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
      }
      this.levelList = matched
    }

src/permission.js

import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'
import { getCookiesName } from '@/utils/auth' // 验权
import queryInfo from '@/utils/queryInfo'
NProgress.configure({ showSpinner: false })// NProgress Configuration
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        // console.log(5555)
        console.log(5555)
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          const roles = [res.data.type.toString()]
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
          })
        })
      } else {
        // console.log(4444)
        console.log(4444)
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()
        }
      }
      queryInfo.queryAllInfo()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {

src/router/index.js

    component: Layout,
    redirect: '/dashboard',
    hidden: true,
    meta: { noCache: true },
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard'),
      name: 'dashboard',
      meta: { title: '主页', noCache: true }
      meta: { title: '主页' }
    }]
  },
  {
    component: Layout,
    name: 'bridgesConsole',
    meta: {
      noCache: true,
      roles: ['0']
    },
    children: [
        name: 'bridgeHome',
        component: () => import('@/views/bridgesConsole/index'),
        redirect: '/bridgeHome/bridgeDetail',
        meta: { title: '主页', noCache: true },
        meta: { title: '桥梁简称' },
        children: [
          {
            path: 'bridgeDetail',
            path: 'danger',
            name: 'danger',
            redirect: 'dangerList',
            meta: { title: '历史报警信息查询', noCache: true },
            meta: { title: '历史报警信息查询' },
            component: () => import('@/views/bridgesConsole/bridgeDanger/index'),
            children: [
              {
                path: 'dangerList',
                name: 'dangerList',
                component: () => import('@/views/bridgesConsole/bridgeDanger/dangerList'),
                meta: { noCache: true }
                component: () => import('@/views/bridgesConsole/bridgeDanger/dangerList')
              },
              {
                path: 'dangerDetail',
                name: 'dangerDetail',
                component: () => import('@/views/bridgesConsole/bridgeDanger/dangerDetail'),
                meta: { title: '报警信息浏览', noCache: true }
                meta: { title: '报警信息浏览' }
              }
            ]
          },
            component: () => import('@/views/bridgesConsole/bridgeMonitor/index'),
            meta: {
              title: '历史监测信息查询',
              roles: ['0'],
              noCache: true
              roles: ['0']
            }
          }
        ]
    meta: {
      title: '用户系统管理',
      icon: 'peoples',
      roles: ['1'],
      noCache: true
      roles: ['1']
    },
    alwaysShow: true,
    children: [
        path: 'infoManage',
        name: 'infoManage',
        component: () => import('@/views/peoplesManage/infoManage/index'),
        meta: { title: '用户信息管理', noCache: true }
        meta: { title: '用户信息管理' }
      }
    ]
  },
    meta: {
      title: '基础信息管理',
      icon: 'list',
      roles: ['1'],
      noCache: true
      roles: ['1']
    },
    children: [
      {
        path: 'bridgesInfo',
        name: 'BridgesInfo',
        component: () => import('@/views/baseInfoManage/bridgesInfo/index'),
        meta: { title: '桥梁信息管理', noCache: true }
        meta: { title: '桥梁信息管理' }
      },
      {
        path: 'serversConfig',
        name: 'ServersConfig',
        component: () => import('@/views/baseInfoManage/serversConfig/index'),
        meta: { title: '采集服务器配置', noCache: true }
        meta: { title: '采集服务器配置' }
      },
      {
        path: 'boxesConfig',
        name: 'BoxesConfig',
        component: () => import('@/views/baseInfoManage/boxesConfig/index'),
        meta: { title: '采集盒配置', noCache: true }
        meta: { title: '采集盒配置' }
      },
      {
        path: 'sensorsConfig',
        name: 'SensorsConfig',
        component: () => import('@/views/baseInfoManage/sensorsConfig/index'),
        meta: { title: '传感器配置', noCache: true }
        meta: { title: '传感器配置' }
      }
    ]
  },

src/utils/queryInfo.js

/**
 * Created by luyanan on 18/8/23.
 */
/* eslint-disable one-var */
import request from '@/utils/request'
import store from '@/store'
/*eslint one-var: ["error", { "initialized": "always", "uninitialized": "never" }]*/
var serverList = [],
var bridgeObj = {},
  serverList = [],
  deviceList = [],
  transducerList = [],
  queryAllInfo = function() {
    request({
      url: '/ajax/all/byUser',
      method: 'get',
      params: {
        active: 1
      }
    }).then(res => {
      if (res.success) {
        serverList = res.data.server
        deviceList = res.data.device
        transducerList = res.data.transducer
      }
    })
    if (!bridgeObj.server && store.getters.roles.indexOf('1') === -1) {
      request({
        url: '/ajax/all/byUser',
        method: 'get',
        params: {
          active: 1
        }
      }).then(res => {
        if (res.success) {
          bridgeObj = res.data
          serverList = res.data.server
          deviceList = res.data.device
          transducerList = res.data.transducer
        }
      })
    }
  },
  queryServers = function(bid, flag) {
    const obj = serverList
    /*eslint one-var: ["error", { "initialized": "always", "uninitialized": "never" }]*/
    var servers = [], serverSeqArr = []
    for (let i = 0; i < obj.length; ++i) {
      if (bid === obj[i].bridgeId) {

src/views/bridgesConsole/bridgeDanger/dangerList.vue

      })
    },
    alarmShow(id, msg) {
      this.$router.push({
      this.$router.replace({
        name: 'dangerDetail',
        query: { aid: id, msg: msg }
      })

src/views/bridgesConsole/bridgeDetail/components/BInfoDialog02.vue

<template>
  <el-dialog title="采集服务器信息" :visible.sync="dialogTableVisible" :width="dialogW">
    <el-form class="form-main">
    <el-form class="form-main" style="padding:0 15px">
      <el-row :gutter="16" v-if="serverList.length">
        <el-col :xs="12" :sm="12" :lg="12" v-for="item in serverShowList" :key="item.index">
          <div class="list-item">

src/views/bridgesConsole/bridgeDetail/index.vue

      this.currentNo = val
    },
    alarmShow(id, msg) {
      this.$router.push({
      this.$router.replace({
        name: 'dangerDetail',
        query: { aid: id, msg: msg }
      })
    },
    queryDangerInfo() {
      this.$router.push({ name: 'dangerList' })
      this.$router.replace({ name: 'dangerList' })
    },
    queryMonitorInfo() {
      this.$router.push({ name: 'bridgeMonitor' })
      this.$router.replace({ name: 'bridgeMonitor' })
    },
    queryBirdgeInfo() {
      this.$refs.BInfoDialog01.dialogTableVisible = true

src/views/bridgesConsole/index.vue

<template>
  <div>
    <el-menu class="navbar" mode="horizontal">
      <breadcrumb></breadcrumb>
    </el-menu>
    <router-view></router-view>
  </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'bridgeHome',
  components: {
    Breadcrumb
  }
}
</script>

src/views/dashboard/admin/index.vue

  text-align: center;
  margin: 20px;
  height: 100%;
  padding: 15% 0;
  padding: 12% 0;
  background: #fff;
  .plat-pic{
    margin: 40px auto 0;

src/views/dashboard/other/index.vue

    }
  },
  created() {
    queryInfo.queryAllInfo()
    this.getBridgeLists()
  },
  methods: {
      }
    },
    goToDashboardC(id, name) {
      this.$router.push({ name: 'bridgeHome' })
      Cookies.set('bridgeId', id)
      Cookies.set('bridgeName', name)
      this.$router.replace({ name: 'bridgeHome' })
    },
    handleCurrentChange(val) {
      this.pageNo = val

src/views/findPwd/index.vue

                  center: true,
                  callback: action => {
                    if (action === 'confirm') {
                      this.$router.push({ path: '/login' })
                      this.$router.replace({ path: '/login' })
                    }
                  }
                })
        })
      },
      goLogin() {
        this.$router.push({ path: '/login' })
        this.$router.replace({ path: '/login' })
      }
    }
  }

src/views/layout/components/Navbar.vue

<template>
  <div>
    <marqueebox :isShow="roles.indexOf('1')>=0"></marqueebox>
    <el-menu v-if="roles.indexOf('1')>=0" class="navbar" mode="horizontal">
      <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
    <el-menu class="navbar" mode="horizontal">
      <hamburger v-if="roles.indexOf('1')>=0" class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <breadcrumb></breadcrumb>
    </el-menu>
  </div>

src/views/layout/components/Sidebar/SidebarItem.vue

        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
          <router-link v-else :to="resolvePath(child.path)" :key="child.name" replace>
            <el-menu-item :index="resolvePath(child.path)">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>

src/views/layout/components/TopNavbar.vue

<template>
  <el-menu class="topnavbar" mode="horizontal">
  <div class="topnavbar">
    <div class="logo-container">
      <div class="logo-wrapper" @click="toHome"><div class="logo-img"></div></div>
      <el-dropdown v-if="roles.indexOf('1')<0" trigger="click" class="drop-menu">
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
      	<div>您好，{{ name }}</div>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <el-dropdown-menu class="user-dropdown" slot="dropdown">
        <router-link v-if="roles.indexOf('1')>=0" class="inlineBlock" to="/">
          <el-dropdown-item>主页</el-dropdown-item>
        </router-link>
        <router-link v-if="roles.indexOf('1')<0" class="inlineBlock" to="/bridgeHome">
          <el-dropdown-item>主页</el-dropdown-item>
        </router-link>
        <el-dropdown-item divided>
          <span @click="logout" style="display:block;">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-menu>
    <div class="name-box">
      <span>您好，{{ name }}</span>
      <span class="exit-btn" @click="logout">退出登录</span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'element-ui'
import { getBridgeList } from '@/api/bridgeInfo'
import Cookies from 'js-cookie'
  },
  methods: {
    toHome() {
      this.$router.push({ path: '/' })
      this.$router.replace({ path: '/' })
      Cookies.remove('bridgeId')
      Cookies.remove('bridgeName')
    },
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        Cookies.remove('bridgeId')
        Cookies.remove('bridgeName')
        location.reload() // 为了重新实例化vue-router对象 避免bug
      MessageBox.confirm('您确认要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          Cookies.remove('bridgeId')
          Cookies.remove('bridgeName')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }).catch(() => {
        console.log('已取消退出')
      })
    },
    getBridgeLists() {
      this.showName = name
      Cookies.set('bridgeId', id)
      Cookies.set('bridgeName', name)
      this.$router.push({
      this.$router.replace({
        name: 'bridgeDetail',
        query: { id: id, name: name }
      })
      color: #fff;
    }
  }
  .name-box{
    display: inline-block;
    position: absolute;
    right: 20px;
    font-size:14px;
    overflow: hidden;
    color:#fff;
    .exit-btn {
      margin-left:30px;
      cursor: pointer;
    }
  }
  .avatar-container {
    height: 50px;
    display: inline-block;

src/views/login/index.vue

              if (response.data) {
                this.$store.dispatch('GetUserInfo').then(res => {
                })
                this.$router.push({ path: '/' })
                this.$router.replace({ path: '/' })
              } else {
                Message.error('登录账号与密码不匹配，请检查后重试')
                this.changeImgVc()
      })
    },
    goBackPwd() {
      this.$router.push({ path: '/findPwd' })
      this.$router.replace({ path: '/findPwd' })
    },
    changeImgVc() {
      this.imgVcUrl = getPictureVC('PIC_LOGIN')