继续后台管理系统的开发,遇到路由跳转的问题了,百度了一下,然后又参考了现有的项目,相关配置如下:

  1. 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' }
        })
      }

如果看不太懂,可以去原文

Logo

前往低代码交流专区

更多推荐