vue 后台管理 菜单展示以及路由配置和页面跳转

Vue.js 是一个流行的前端JavaScript框架，常用于开发单页面应用程序（SPA）。在开发后台管理系统的菜单展示以及路由配置和页面跳转时，Vue通常与Vue Router一起使用，Vue Router是官方的路由管理器，它和Vue.js的生态系统无缝集成。

首先，你需要安装Vue Router。你可以使用npm或yarn命令来安装：

npm install vue-router
# 或者
yarn add vue-router

然后，在你的Vue项目中，你需要定义路由配置。这通常在`src/router/index.js`文件中完成，如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 引入其他需要的组件...

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 配置其他路由和对应的组件...
]

const router = new VueRouter({
  mode: 'history', // 或者是 'hash'
  base: process.env.BASE_URL,
  routes
})

export default router

在Vue实例中使用Vue Router：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router, // 使用路由
  render: h => h(App)
}).$mount('#app')

接下来，你可以创建菜单组件，在菜单组件中，你可以使用`<router-link>`标签来创建导航链接，用户点击链接时会进行页面跳转：

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 其他菜单项 -->

同时，使用`<router-view>`组件来显示匹配的组件内容：

<div id="app">
  <nav>
    <!-- 菜单代码 -->
  </nav>
  <router-view></router-view>
</div>

这样，当用户点击不同的菜单项时，Vue Router会根据配置的路由规则，匹配对应的组件并显示在`<router-view>`中。页面之间跳转时，浏览器的URL会改变，以反映当前视图。