继续后台管理系统的开发,遇到路由跳转的问题了,百度了一下,然后又参考了现有的项目,相关配置如下:
- router.js文件:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
redirect: '/dashboard'
},
{
path: '/',
component: ()=> import("@/components/Home.vue"),
meta: {
title: '自述文件'
},
children: [
{
path: '/dashboard',
name: 'dashboard',
component: () => import(/* webpackChunkName: "dashboard" */ '@/view/dashboard/index.vue'),
meta: {
title: '首页'
}
},
{
path: '/oneFile',
name: 'oneFile',
component: ()=> import(/* webpackChunkName: "oneFile" */ "@/view/oneFile/index.vue")
},
{
path: '/twoFile',
name: 'twoFile',
component: ()=> import(/* webpackChunkName: "twoFile" */ "@/view/twoFile/index.vue")
},
{
path: '/threeFile',
name: 'threeFile',
component: ()=> import(/* webpackChunkName: "threeFile" */ "@/view/threeFile/index.vue")
},
]
}
];
// 路由配置
const RouterConfig = {
mode: 'history', // require service support
scrollBehavior: () => ({
y: 0
}),
routes
};
//防止重复点击
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};
// export const router = new Router(RouterConfig)
const createRouter = () => new Router(RouterConfig)
// 创建路由实例
const router = createRouter()
// 添加动态路由
// addAsyncRouter()
export default router;
侧边栏菜单
代码:
<template>
<div class="sidebar">
<el-menu
default-active="/dashboard"
class="el-menu-vertical-demo"
@select="handleSelect">
<el-menu-item index="/dashboard">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
<el-menu-item index="/oneFile">
<i class="el-icon-location"></i>
<span>导航一</span>
</el-menu-item>
<el-menu-item index="/twoFile">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="/threeFile">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</div>
</template>
select绑定的方法里js代码这样写的:
handleSelect(key, keyPath) {
this.$router.push({
path: key,
params: {data: 'query' }
})
}
如果看不太懂,可以去原文