动态 router.addRoutes 导入组件的问题
Posted
技术标签:
【中文标题】动态 router.addRoutes 导入组件的问题【英文标题】：Issue with dynamicallly router.addRoutes importing Component 【发布时间】：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;
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于动态 router.addRoutes 导入组件的问题的主要内容，如果未能解决你的问题，请参考以下文章