根据图片，用Vue路由实现后台管理首页，点击左侧导航文字，在右侧显示连接页面内容 要求：提交关键代码，全部代码发给我

在Vue.js中，结合Vuex管理和Vue Router实现这样的后台管理系统需要以下几个步骤：

首先，安装必要的依赖：

npm install vue-router vuex axios

1. 创建Vue项目并结构化文件：
- `src/router/index.js` (路由配置)
- `src/store/index.js` (状态管理)
- `src/views/Home.vue` (主页视图)
- `src/views/Navigation.vue` (左侧导航栏)
- `src/views/PageA.vue`, `src/views/PageB.vue` 等... (对应右侧的具体页面)

2. 配置Vue Router:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Navigation from '@/views/Navigation.vue'
import PageA from '@/views/PageA.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      { path: 'nav-a', component: PageA },
      // 添加其他导航链接...
    ]
  },
  { path: '/navigation', component: Navigation }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

3. 设置Vuex store:

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { mapState } from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    selectedPage: ''
  },
  mutations: {
    setSelectedPage(state, page) {
      state.selectedPage = page;
    }
  },
  actions: {
    selectPage({ commit }, page) {
      commit('setSelectedPage', page);
    }
  },
  getters: {
    currentPage: mapState(['selectedPage'])
  }
})

4. 更新`Home.vue`组件：
- 使用`<router-view>`渲染对应的页面
- 当点击导航链接时，通过`this.$store.dispatch`更新状态并跳转

<!-- Home.vue -->
<template>
  <div>
    <Navigation @selectPage="handleNavClick" />
    <router-view v-if="$route.meta.showWhenSelected === true"></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    handleNavClick(page) {
      this.$store.dispatch('selectPage', page);
    }
  },
  computed: {
    ...mapGetters(['currentPage'])
  },
  beforeRouteUpdate(to, from, next) {
    if (from.path !== to.path && !this.$route.meta.showWhenSelected) {
      // 判断当前页面是否应该隐藏，比如在非导航链接时隐藏页A的内容
      next();
    }
  }
}
</script>

5. 更新`Navigation.vue`组件：
- 显示导航菜单，并监听点击事件

<!-- Navigation.vue -->
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" @click="selectPage(item)">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['items'],
  methods: {
    selectPage(item) {
      this.$emit('selectPage', item.name);
    }
  }
}
</script>

以上就是一个简单的Vue+Vuex+Vue Router实现的例子，你可以根据实际需求修改细节。请注意，这只是一个基础示例，你还需要处理路由懒加载、权限控制等场景。