vue 野路子实现的路由监听显示当前路由位置

router.js

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/view/login/login'
import home from '@/view/home/home'
import forget from '@/view/forget/forget'
import match from '@/view/match/match'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        title: '登录',
        keepAlive: true,
        isBack: false,
        index: 2
      }
    },
    {
      path: '/',
      name: 'home',
      component: home,
      meta: {
        title: '主页',
        keepAlive: true,
        isBack: false,
        index: 1
      }
    },
    {
      path: '/forget/:token',
      name: 'forget',
      component: forget,
      meta: {
        title: '找回密码',
        keepAlive: true,
        isBack: false,
        index: 3
      }
    },
    {
      path: '/match',
      name: 'match',
      component: match,
      meta: {
        title: '比赛',
        keepAlive: true,
        isBack: false,
        index: 2
      }
    }
  ]
})

这里在meta中增加了index，表示当前是第几级页面

store.js 增加routers区别于router

store.js中导入的router.js

const sessionStorage = window.sessionStorage
const routers = JSON.parse(sessionStorage.getItem('router')) || [
  {
    name: '首页',
    path: '/',
    active: 'active'
  }
]
export default routers

store中更改routers状态的操作函数

const actions = {
  setLang (context, param) {
    context.commit('setlang', param)
  },
  setToken (context, param) {
    context.commit('setToken', param)
  },
  setUid (context, param) {
    context.commit('setUid', param)
  },
  setLoading (context, param) {
    context.commit('setLoading', param)
  },
  sessionUser (context, param) {
    context.commit('sessionUser', param)
  },
  routerUpdate (context, param) {
    console.log('param', param)
    context.commit('routerUpdate', param)
  }
}

export default actions

const sessionStorage = window.sessionStorage
const mutations = {
  setLang (state, lang) {
    state.lang = lang || 'en-US'
  },
  setToken (state, token) {
    state.token = token || ''
    sessionStorage.setItem('token', token)
  },
  setUid (state, uid) {
    state.uid = uid
  },
  setLoading (state, loading) {
    state.loading = loading
    setTimeout(() => {
      state.loading = false
    }, 40000)
  },
  sessionUser (state, user) {
    state.user = user
    sessionStorage.setItem('user', user)
  },
  routerUpdate (state, router) {
    state.routers = router
    sessionStorage.setItem('router', JSON.stringify(router))
  }
}

export default mutations

$router的监听

'$route' (to, from) {
      let path = []
     if (to.meta.index === 2 && from.meta.index === 1) {
        path = [
          {name: '首页', path: '/', active: ''},
          {name: to.name, path: to.path, active: 'active'}
        ]
        this.$store.commit('routerUpdate', path)
      } else if (from.meta.index === 2 && to.meta.index === 3) {
        path = [
          {name: '首页', path: '/', active: ''},
          {name: from.name, path: from.path, active: ''},
          {name: to.name, path: to.path, active: 'active'}
        ]
        this.$store.commit('routerUpdate', path)
      } else if (from.meta.index === 3 && to.meta.index === 3) {
        path = [
          {name: '首页', path: '/', active: ''},
          {name: from.name, path: from.path, active: ''},
          {name: to.name, path: to.path, active: 'active'}
        ]
        this.$store.commit('routerUpdate', path)
      } else if (to.meta.index === 2 && from.meta.index === 3) {
        path = [
          {name: '首页', path: '/', active: ''},
          {name: to.name, path: to.path, active: 'active'}
        ]
        this.$store.commit('routerUpdate', path)
      } else if (to.meta.index === 2 && from.meta.index === 2) {
        path = [
          {name: '首页', path: '/', active: ''},
          {name: to.name, path: to.path, active: 'active'}
        ]
        this.$store.commit('routerUpdate', path)
      }
    }