如何使用vue-router命令视图

本篇内容主要讲解“如何使用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命令视图”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！