Vue路由配置

1. 安装和配置 Vue Router

安装vue-router，它是 Vue.js 官方的路由管理器。

npm install vue-router

然后在项目的入口文件（通常是main.js）中进行配置：

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

// 引入路由配置文件
import router from './router';

Vue.use(VueRouter);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

2. 配置路由文件

在src目录下创建一个router目录，并在其中创建一个index.js文件来配置路由：

// 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: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

3. 创建视图组件

在src目录下创建一个views目录，用于存放各个页面的组件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<style scoped>
/* 可以在这里添加页面的样式 */
</style>

4. 实现菜单导航

在App.vue中，你可以使用<router-link>组件来创建菜单导航：

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 可以在这里添加全局样式 */
</style>

详细解释

• <router-link>：这是 Vue Router 提供的组件，用于创建导航链接。to属性指定了链接的目标路径，当用户点击该链接时，Vue Router 会自动处理路由跳转，将对应的组件渲染到<router-view>中。
• <router-view>：这是一个占位符组件，用于显示当前路由对应的组件。当路由发生变化时，Vue Router 会根据路由配置找到对应的组件，并将其渲染到<router-view>所在的位置。

动态菜单的实现

如果你的菜单需要根据后端数据动态生成，可以在组件的mounted钩子函数中获取菜单数据，然后动态渲染<router-link>组件：

<template>
  <div id="app">
    <nav>
      <router-link v-for="item in menuItems" :key="item.path" :to="item.path">{{ item.name }}</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      menuItems: []
    };
  },
  mounted() {
    // 模拟从后端获取菜单数据
    this.menuItems = [
      { path: '/', name: 'Home' },
      { path: '/about', name: 'About' }
    ];
  }
};
</script>

<style>
/* 可以在这里添加全局样式 */
</style>