时间戳

首页 > 解决方案 > 动态 router.addRoutes 导入组件的问题

laravel-5 - 动态 router.addRoutes 导入组件的问题

问题描述

我目前正在使用 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 Dev Tools 中的 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-5vuejs2vue-router

解决方案

以防万一有人在谷歌中偶然发现这个是他的工作原理：

<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>

推荐阅读