vue+ElementUI中导航菜单路由跳转方法

路由index.js文件： 

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        name: 'Manage',
        component: () => import('../views/Manage.vue'),
        redirect:'/home',
        children: [
            {path: 'home', name: 'Home', component: () => import('../views/Home.vue')},
            {path: 'user', name: 'User', component: () => import('../views/User.vue')},
        ]
    },
]
 
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router

方法一：1）在el-menu中添加router属性  2）index值改为导航路由地址（与router/index.js对应）

// <Aside.Vue>
<template>
    <el-menu router>    <!--添加router属性：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转-->
        <el-menu-item index="home" >  <!--index 导航路由地址，此处为home-->
            <template slot="title">
                <i class="el-icon-house"></i>
                <span slot="title">主页</span>
            </template>
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="user">   <!--index 导航路由地址，此处为user-->
                <i class="el-icon-s-custom"></i>用户管理
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>
export default {
    name: "Aside",
}
</script>

方法二：使用 this.$router.push() 方法

// <Aside.Vue>
<template>
    <el-menu>
        <el-menu-item index="home" > 
            <template slot="title">
                <i class="el-icon-house"></i>
                <span slot="title" @click="toHome">主页</span>
            </template>
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="user">   
                <i class="el-icon-s-custom"></i>用户管理
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>
export default {
    name: "Aside",
    methods:{
        toHome(){
            this.$router.push("/home")   //不带惨
        }
    }
}
</script>

方法三：router-link

// <Aside.Vue>
<template>
    <el-menu>
        <el-menu-item index="home" > 
            <template slot="title">
                <i class="el-icon-house"></i>
                <span slot="title">
                <router-link :to="{path:'/home'}">主页</router-link>   <!--不带参数-->
                </span>
            </template>
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="user">   
                <i class="el-icon-s-custom"></i>用户管理
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>
export default {
    name: "Aside",
    methods:{
        toHome(){
            this.$router.push("/home")   //不带惨
        }
    }
}
</script>