请问vue在动态import加载页面的时候，能否提前判断页面是否存在，如果不存在的话则引入404component。

Question

有一个需求，就是根据后台的给的menus，动态处理并加载到路由里去，但是因为菜单是随时会增加的，如果在没有通知前端增加菜单的情况下，还需要展示菜单，但是对应的相应的component并没有，如果没有的话怎么才能判断，并且加载404的页面。

代码如下：

 component: _import(item.name.replace(/\./g,'/')) ? _import(item.name.replace(/\./g,'/')) : _import('errorPage/404'),

但是这个import如果找不到会直接报错并不会执行后面的，
之前有用以下方法测试

function matchVueFiles(name){
    const context = require.context('@/views',true,/\.vue$/);
    const keys = context.keys();
    return keys.indexOf(name);
}

但是该方法在线上不可以，因为线上没有文件夹。所以该方法也不行，请求各位大神提供思路，解决办法。

Answer 1

提供一种思路
建一个配置文件，配置现在已有的路由组件。在import之前先判断item.name是否存在再决定加载哪一个。

//config.js
export default {components:['a', 'b']}

Answer 2

可以再动态组件外面包装一层,伪代码。可能判断逻辑不是这样子的，思路是这样子的

new Vue({
  // ...
  components: {
    'my-component': () => {
        return new Promise((resove, reject) => {
            var RemoteComponent = import('./my-async-component')
            var Component404 = import('./my-async-404-component')
            RemoteComponent.then(res => {
                resove(res)
            })
            
            RemoteComponent.catch(e => {
                Component404.then(res => {
                    resove(res)
                })
            })
        })
        
    }
  }
})