angular2中router-outlet使用

最新推荐文章于 2023-08-16 11:38:30 发布

页神建辑-思而后学

最新推荐文章于 2023-08-16 11:38:30 发布

阅读量835

点赞数

分类专栏： angular2 文章标签： react.js vue.js

本文链接：https://blog.csdn.net/weixin_41993525/article/details/110900258

版权

本文探讨了Angular2中的router-outlet如何使用，它与Vue.js的router-view功能相似，作为页面内容的动态加载区域。通过路由配置，不同路由名对应不同页面，并在指定的router-outlet中进行替换。示例中展示了单页面如何使用两个router-outlet来加载不同的子组件。

摘要由CSDN通过智能技术生成

前文分析了vue.js的router-view的使用，本文分析一下angular2中的router-outlet的使用。其实angular2中的router-outlet标签与vue.js中的router-view标签的作用并无二致（react中有同名标签），所以由此可见这三大前端框架有很高的相似度。

router-outlet

index.html是整个app的内容入口，如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HelloWorld</title>
        <base href="/">

         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel