代码

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {store} from './store'
//请求方法的封装
import {postRequest} from "@/utils/api";
import {postKeyValueRequest} from "@/utils/api";
import {putRequest} from "@/utils/api";
import {deleteRequest} from "@/utils/api";
import {getRequest} from "@/utils/api";
import {initMenu} from "@/utils/menus";

router.beforeEach((to, from,next) => {

    if (to.path == '/') {
        next();
    }else {
        initMenu(router, store);
        next();
    }
})

const app = createApp(App)

app.use(ElementPlus)

app.config.globalProperties.postRequest=postRequest
app.config.globalProperties.postKeyValueRequest=postKeyValueRequest
app.config.globalProperties.putRequest=putRequest
app.config.globalProperties.deleteRequest=deleteRequest
app.config.globalProperties.getRequest=getRequest

app.use(router).use(store).mount('#app')

router\index.js:

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from "@/views/Test1";
import Test2 from "@/views/Test2";


const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    hidden: true
  }
  ,{
    path: '/home',
    name: 'Home',
    component: Home,
    hidden: true
  },{
    path: '/home',
    name: '测试菜单',
    component: Home,
    children:[
      {
        path: '/Test1',
        name: '导航一',
        component: Test1
      },{
        path: '/Test2',
        name: '导航二',
        component: Test2
      }
    ]
  }
]
//home里面的children去跳转到时候首先home下面找有没有<router-view/>

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

附加说明:Login.vue为登录页面,注销用户时跳转到登录页面,跳转代码为:

this.$router.replace("/");

报错信息:
在这里插入图片描述

参考:

带有空 path 的命名子路由不再添加斜线
main.jsrouter\index.js中的path: '/'改为path: ''
问题解决。
2021/11/30 进度
今天把将main.jsrouter\index.js中的path: ''改为path: '/',运行又没有问题了,最新仓库地址:人事系统(前端)

Logo

前往低代码交流专区

更多推荐