vue3 element 导航菜单的使用

<template>
    <div>
        <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">
       <el-menu :default-openeds="['1', '3']"  @select="menuselect">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item index="/test1">选项1</el-menu-item>
          <el-menu-item index="/test2">选项2</el-menu-item> 
      </el-submenu>
       
    </el-menu>

    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

    </div>
</template>
<script>
export default {
   name:"Home",
   methods:{
       menuselect(index){
           this.$router.push(index);
       }
   }

};
</script>
<style scoped>
</style>

路由设置：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/home.vue'
import test1 from '../views/test1.vue'
import test2 from '../views/test2.vue'
Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/home',
            name: 'home',
            component: Home,
            children: [{
                    path: '/test1',
                    name: 'test1',
                    component: test1
                },
                {
                    path: '/test2',
                    name: 'test2',
                    component: test2
                },
            ]
        },
        {
            path: '/',
            name: 'Login',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Login.vue')
        }
    ]
})