vue路由器命名视图的使用说明

有时您希望同时显示多个视图(在同一级别)，而不是嵌套显示，例如，创建一个包含两个视图的布局：侧边栏(侧面导航)和主视图(主内容)，这样命名视图就派上了用场。您可以在界面中单独命名多个视图，而不是单个退出。如果路由器视图没有名称集，则默认为默认值。

如果像他解释的那么简单，可以直接将侧边栏组件引入到根组件app.vue中，注册并渲染。没有必要重新发明轮子。由于可以在route.config.js中灵活配置，所以可以灵活使用。官网的例子：

Router-view class=' view one '/Router-view Router-view class=' view two ' name=' a '/Router-view Router-view Router-view三' name=' b '/Router-view const Router=new vue Router({ route :[{ path : '/'，components: { default3360foo，a:bar，b:baz}})可以在app.vue中注册多个命名视图，这样就可以了。

template div id=' app ' router-view/router-view router-view name=' nav '/router-view router-view name=' side '/router-view/div/template { path : '/Home '，name:' home '，components: {默认为： home，nav: nav，//如果不给出，就不会呈现side: side}，children 3360[{ path : '/'，components://如果不给，子组件匹配不上，就不渲染{ path :‘post’，component: post}]}首先是一个简单的命名视图(即点击不同路线跳转，然后实现多个组件内容的显示)

效果：

第二，嵌套路由视图(嵌套路由规则和视图规则都得到满足)

如果有任何不足，请给我你的建议！希望给大家带来帮助！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接