本篇内容主要讲解“如何使用vue-router命令视图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用vue-router命令视图”吧!
一、效果介绍
话不多说开局一张图，咱们先来上一张图看看效果
二、命名视图
2.1、介绍
当我们需要同时（同级）展示多个视图，就可以利用vue-router中的命名视图。通过下述命名视图语法我们就可以轻松实现，当一个路由path 匹配后，分别检查是否需要在navbar、default、tabbar三个视图区接着我们在定义路由时，将component 改为components 定义一个路由path 对应n个同级组件，然后在对应视图区域显示
感觉如何，是不是很简单，知道概念和语法后，下面我们就一起来试试吧
2.2、使用
首先我们分部定义NavBar导航栏、Tabbar标签栏公共组件 在vue库学习中我们利用 Vue.component 来定义公共组件、在vuecli中我们利用 .vue 文件 ，这里我们按照的是路由简写定义公共组件。接着我们来定义路由匹配规则
alias 是路由别名、components 多加了一个 s 可以同时（同级）展示多个视图，然后就是视图区展示匹配的组件数据了 完整代码，各位小伙伴可以通过浏览器运行查看效果啦(*￣︶￣)
上述代码的优点，通过这一个html文件不足以看出，但是实战开发中，利用.vue 文件封装公组件，项目中需要导入、注册才能使用时，你会发现直接通过命名视图修改路由决定navbar 、tabbar 是否显示尤为方便。
到此，相信大家对“如何使用vue-router命令视图”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
