编者：李国帅

qq：9611153 微信lgs9611153

时间：2021/5/22 

问题描述：

这几天自己客串到web端协助做下页面，碰到了这个问题。

这个web前端使用基于vue-admin-template开发，从左侧菜单打开右侧列表界面A，点击详情打开另一个界面B，出现路由无效的问题。

本要跳转到某个具体页面B，但是直接进入http://localhost:9527/#/404

OOPS!

All rights reserved wallstreetcn

The webmaster said that you can not enter this page...

Please check that the URL you entered is correct, or click the button below to return to the homepage

似乎是该路径可能不存在。

所需资源:

vue-admin-template-4.4.0

vue 2.6.10

Visual Studio Code 1.53.2

node-v12.19.0

测试:

理论上的错误解决难度遇到现实总是被放大。

这个问题的诡异处在于：

         1 使用用户1打开网站，从A路由到B没有问题，但是用户2就会有问题。用户2的列表中无数据。

         2 从A路由到C又没有问题

         3 对A界面清空内部元素，直接路由到B依然有问题

         4 对B界面清空内部元素，直接打开也有问题

         5 检查路由路径没有错误

         6 检查路由文件也看不出问题，和其他的页面没有两样。

通过这些测试，似乎可以排除

         A内容有错

         B内容有错

         A或B的路径有错

         路由文件有错

那是不是不同用户导致页面A有逻辑错误，那么测试3又怎么解释？

根据提示，和网络上别人的解决方法，基本可以确定是路由的问题，但是问题到底如何解决的，这依然是个问题。

这个问题对于我来说，真是一头雾水。

不过试得多了也有可能碰个巧，得到一个不算彻底的答案，临时解决问题。

解决方案:

处理路由文件 router/index.js，做以下处理。

从菜单定位页面打开另一个页面，后者必须紧跟前者；中间不能穿插其他的菜单

下面方式正常

            {
                path: 'A',
                component: () =>
                    import ('@/views/X/A'),
                name: 'A',
                meta: {
                    title: '会诊'
                }
            },
            {
                path: 'B',
                component: () =>
                    import ('@/views/X/B'),
                name: 'B',
                hidden: true,
                meta: {
                    title: '医生',
                    activeMenu: '/X/A'
                }
            },

如果中间有穿插就可能出错

  	 {
		path: 'A',
		component: () =>
			import ('@/views/X/A'),
		name: 'A',
		meta: {
			title: '会诊'
		}
	},
	{//--------------------------------菜单有穿插可能导致问题
        path: 'C',
        component: () => import('@/views/X/C'),
        name: 'C',
        meta: {
          title: '问诊',
          roles: ['isSelf']
        }
      },//-------------------------------
      {
        path: 'B',
        component: () => import('@/views/X/B'),
        name: 'B',
        hidden: true,
        meta: {
          title: '医生',
          activeMenu: '/X/A'
        }
      },

总结：

也是vue自己的问题，只能这么想，这对我来说就是一个若明奇妙的原因。

对于碰到的这个404问题的根源，猜测可能是vue处理路由文件的时候出问题了，原谅不求甚解，有这个结果对我来说已经够了，也许更新一下某些工具就不会出现吧。