Element-UI中el-menu嵌入路由跳转

首先我是用vue cli创建的项目，自定义中选了router路由、vuex等插件。

html标签：

其中<router-view />标签的作用为展示配置的路由界面。

传的index为路由路径，首页为默认进入时的页面

handleSelect为点击切换时打印的路由日志，如无其他操作可不写

<el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="/" :style="styleVar">首页</el-menu-item>
    <el-menu-item v-for="(item, index) in topNav" :index="String(item.path)" :key="index">
        {{ item.name }}
    </el-menu-item>
</el-menu>

// 该组件的目的是展示路由页面的内容
<router-view />

data静态数据：

topNav: [
    {
        name: '页面一',
        path: '/about',
    },
],

路由index.js配置界面：

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue'),
    },
];

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

export default router;