封装的router 要在main.js里面导入
import router from './router'
1.先要在component里面新建 xxx.vue
2.在router文件夹里的js
import xxx from ‘@/component/xxx'
Vue.use(Router);
export default new Router({
routes[
{
path:'/',
redirect:'/Login',
//默认加载登录页面
},
{
path:'/Login',
name:'Login',
component:Login
},
{
path:'/index',
name:'Index',
component:Index,
// index是作为导航，template是要跳转的页面，这个是全局的都可以用就不用 每个都写了
children:[
{
path:'/index/home'
name:'home',
component:home
},
{
path:'/index/xxx'
name:'xxx'
component:xxx
},
]
}
]
})
在index页面：
用个组件把头部，导航栏，还有 跳转内容的
<template>
<div>
//左边的导航栏,用el-container
<el-container>
<div>
<el-aside>
<el-row class="tac">
<el-col :span="12">
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
//没有下拉菜单
<el-menu-item index="1" @click="gohome" >
<i class="el-icon-location"></i>
<span >主页</span>
</el-menu-item>
//有下拉菜单<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>员工管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1" @click="goxxx">员工列表</el-menu-item>
<el-menu-item index="2-2" >角色权限</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
</div>
</el-container>
//右边用el-container包裹<el-header>和<el-main>
<el-container>
<el-header>
//放头部类似什么退出 帮助之类的
</el-header>
//放导航要跳转的页面
<el-main>
<router-view></router-view>//路由渲染口
</el-main>
</el-container>
</div>
</template>
<script>
export default{
name：‘Index’,
data(){
return{}
},
methods:{
gohome:function(){
this.$router.push({path:'Index/Home'})
},
goxxx:function(){
this.$router.push({path:'/Index/xxx'})
},
handleOpen(key, keyPath)
{
console.log(key, keyPath);
},
handleClose(key, keyPath)
{
console.log(key, keyPath);
}
}
</script>