教你玩转vue-router命令视图
在使用VUE开发的项目中，我们为了减少代码冗余和方便后期维护，我们会将一些公共区域封装为一个公共组件，需要时直接调用即可。但是相对于NavBar导航栏、Tabbar标签栏几乎每个页面都需要使用的公共组件每次导入注册较为麻烦，今天小千就来告诉大家一个好方法。
一、效果介绍
话不多说开局一张图，咱们先来上一张图看看效果
二、命名视图
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命令视图相关推荐
- 教你玩转Vue和Django的前后端分离
题图:枯树新芽,来自网络,侵删. 阅读本文大概需要 10 分钟. 今天中秋节,先祝大家节日愉快,不在父母身边的都打个电话关心一下吧,我们最容易忽略的人恰恰是最爱我们的父母. 另外,节假日真的不适合出去 ...
- 手把手教你玩转Vue
什么是VUE Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- Vue Router 命名路由、（嵌套）命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- Vue Router的详细教程
Vue Router的详细教程 安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- 教你如何制作vue+springboot项目
前言 最近刚刚做了一个基于vue+springboot的学生成绩管理系统,于是基于这点,对遇到的一些问题进行一些配置的汇总.以及vue+springboot项目是怎么实现的,以下将贴出vue和spri ...
- 教你玩转ps-刘青-专题视频课程
教你玩转ps-51878人已学习 课程介绍 教你玩转ps 课程收益 学习ps 讲师介绍 刘青 更多讲师课程 中传计算机老师 长期讲授ps.多媒体等课程 课程大纲 ...
- Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
- Vue | Vue Router 路由的使用
文章目录 一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
- Vue3中的Vue Router初探
对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变 ...
最新文章
- 用 C 语言开发一门编程语言 — S-表达式
- Android应用--简、美音乐播放器获取专辑图片（自定义列表适配器）
- getservbyname和getservbyport
- 人工智能时代，Python机器学习及分析工具
- Matlab-重构和重新排列数组
- 一道小时候经常玩的数字游戏
- JSP中的forward指令
- jsonobject修改key的值_Go 语言 map 解析之 key 的定位核心流程
- 《asp.net夜话》一书视频ASP.NET夜话视频1-17章下载(ASP.NET夜话2009年5月9日更新)
- spring，springmvc，mybatis整合ssm框架出现ORA-02289:序列不存在问题
- DTW算法Python实现
- 水面反光如何拍摄_「摄影技巧全解」「水面篇」不一样的水面粼粼波光
- MATLAB绘制地形图和等高线图
- 数据分析八大模型：详解RFM模型
- 安卓第三方SDK打包成uni-app插件
- 这款安全好用的手机浏览器，真是一股清流，值得点赞
- 谈谈我是怎么学会python的
- redis击穿，穿透，雪崩以及解决方案
- 教你如何获取网站icon图标！！
- 根号6用计算机怎么算,根号6等于多少怎么算