路由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>