vue.js - 如何路由到子文件夹/子级别中存在的 vue 文件？

Question

目前，我已将所有 vue 文件放在名为“views”（项目名称/src/views）的文件夹中，除了位于下一级的 Home.vue 页面（项目名称/src/views/seyal/Home.vue）。以下路由器配置工作 -

路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import { compact } from 'lodash'

Vue.use(Router)

const createRouter = (routeData) => new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routeData
})

const defaultRoutes = [{
        path: '/',
        name: 'home',
        component: () =>
            import ('@/views/Home.vue'),
        props: false
    },
    {
        path: '/login',
        name: 'login',
        component: () =>
            import ('@/views/Login.vue'),
        props: false
    },
    {
        path: '/employeeList',
        name: 'employeeList',
        component: () =>
            import ('@/views/EmployeeList.vue'),
        props: false
    },
    {
        path: '/jobData',
        name: 'jobData',
        component: () =>
            import ('@/views/JobData.vue'),
        props: false
    },
  {
        path: '/seyal/home',
        name: 'seyal/home',
        component: () => import('@/views/seyal/Home.vue')
    },

]

const router = createRouter(defaultRoutes)


export function resetRouter() {
    const newRouter = createRouter(defaultRoutes)
    router.matcher = newRouter.matcher
}



export default router;

上面的路由器配置适用于路径中存在的所有文件（projectname/src/views）。但我注意到的一件事是，每当我路由到路径中存在的 home.vue 页面时（projectname/src/views/ seyal），然后如果我尝试路由到直接存在于视图文件夹（项目名称/src/views）中的其他 vue 页面，那么在这种情况下我无法这样做。为什么会发生这种情况？我还注意到，如果我首先访问 seyal 主页，然后如果我尝试访问其他页面，那么在浏览器 url 中，seyal 部分仍然存在于 url 中。例如 - localhost/seyal/jobData 而不仅仅是localhost/jobData.为什么 seyal 部分仍然出现在此处的 url 中？请帮助！

标签： vue.jsvue-routervue-router4