动态 router.addRoutes 导入组件的问题答案

【问题标题】：Issue with dynamicallly router.addRoutes importing Component动态 router.addRoutes 导入组件的问题
【发布时间】：2019-12-05 12:25:50
【问题描述】：

我目前正在使用 Laravel 作为后端来玩 Vue。我设置了一个页面模型，每个页面都可以有“孩子”。

现在我正在尝试为 vue-router 动态构建路由。

注意：这是我 Blade 模板中的内联脚本，没有 webpack 或 babel！

    <body>
        <div id="app">
        <router-link v-for="route in routes" :to="route.path" :key="route.name">@{{route.name}}
            <router-link  v-for="child in route.children" :to="child.path" :key="child.name">@{{child.name}}</router-link>
        </router-link>
        <router-view></router-view>
        </div>
    </body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>

<script type="module">
Vue.use(VueRouter);
let routes = [];

const router = new VueRouter({ routes});

window.app = new Vue({
    el: '#app',
    router,
    created(){
        axios.get('/pages').then(r => this.createRouting(r));
    },
    methods:{
        createRouting(pages){
           let vm = this

           pages.forEach(function(page){
                vm.routes.push(vm.makeRoute(page))
           })
           vm.$router.addRoutes(vm.routes)

        },
        makeRoute(page){
            let vm = this
            let route = {}
            route.path = page.slug
            route.name = page.name
            route.component = () => import('/js/Test.js')
            if(page.children.length){
                route.children = []
                page.children.forEach(function(child){
                    route.children.push(vm.makeRoute(child))
                })
            }
            return route
        }
    }
});
</script>

这工作，除了路由器视图不显示组件。路由器链接按预期显示。而且我可以在 Vue 开发工具的 Routing 下看到所有的路由。

我尝试硬编码一条路线，以验证导入是否有效并动态添加其他路线。

let routes = [    
    {
        path:'/',
        component:() => import('/js/Test.js')
    }
];

这显示 / 路由上的测试组件，但所有其他路由显示空白路由器视图 

在 Vue Dev Tools 中，第一个路由的组件显示：

component:ƒ component()

所有其他路线显示：

component:ƒ ()

Test.js 组件：

let Test = Vue.component('Test',{
    template:`<div>Foo</div>`
});
export default Test;

【问题讨论】：

标签： laravel-5 vuejs2 vue-router

【解决方案1】：

以防万一有人在 Google 中遇到此问题这是他的工作原理：

<body>
        <div id="app">
        <router-link v-for="route in routes" :to="route.path" :key="route.name">@{{route.name}}
            <router-link  v-for="child in route.children" :to="child.path" :key="child.name">@{{child.name}}</router-link>
        </router-link>
        <router-view></router-view>
        </div>
    </body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>

<script type="module">
Vue.use(VueRouter);
let routes = [];

const router = new VueRouter({ routes});

window.app = new Vue({
    el: '#app',
    router,
    created(){
        axios.get('/pages').then(r => this.createRouting(r));
    },
    methods:{
        createRouting(pages){
           let vm = this

           pages.forEach(function(page){
                vm.routes.push(vm.makeRoute(page))
           })
           vm.$router.addRoutes(vm.routes)

        },
        makeRoute(page){
            let vm = this
            let route = {}
            route.path = page.slug
            route.name = page.name
            route.component = () => import('/js/Test.js').then(m => m)
            if(page.children.length){
                route.children = []
                page.children.forEach(function(child){
                    route.children.push(vm.makeRoute(child))
                })
            }
            return route
        }
    }
});
</script>

【讨论】：