Vue命名视图

最新推荐文章于 2022-02-24 14:58:22 发布

weixin_30685029

最新推荐文章于 2022-02-24 14:58:22 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/apollo1616/articles/10038086.html

版权

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view></router-view>
<router-view></router-view>

当我们的视图如上时,我们会发现每一个路由被渲染了两次,所以我们需要为视图命名

<router-view name="a"></router-view>
<router-view name="b"></router-view>

var Foo = { template: '<div>foo</div>' }
var Bar = { template: '<div>bar</div>' }
var routes = [
        {
            path:"/one",
            name:"one",
            components:{
                a:Foo,
                b:Bar
            }
        },
    ]

转载于:https://www.cnblogs.com/apollo1616/articles/10038086.html