Vue中通过vue-router实现命名视图的问题


Posted in Javascript onApril 23, 2020

在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示
例如:创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了

在路由对象中 使用components属性 以使一个路径下可挂载多个子组件:
之后即可为每个要展示的组件指定一个名字
默认name为default 即 不设置名字

<script>
 var header={
  template:"<h1>头部</h1>"
 }
 var leftBox={
  template:"<h1>左侧边栏</h1>"
 }
 var mainBox={
  template:"<h1>主体</h1>"
 }

 // 创建路由对象
 var router=new VueRouter({
  routes:[
   // 使用components属性 一个路径下挂载多个子组件
   {path:"/",components:{
    // 默认展示的组件
    "default":header,
    // 为组件命名
    "left":leftBox,
    "main":mainBox
   }}
  ]
 })

 var vm=new Vue({
  el:'#app',
  data:{},
  methods:{},
  // 挂载路由对象
  router
 });
</script>

然后 在页面中使用<router-view>标签进行展示 在标签上指定name
若指定了name 那么该<router-view>只能放指定name的组件

<div id="app">
	<!-- 不指定name 则使用默认(default)的组件 -->
	<router-view></router-view>
	<!-- 为<router-view>指定name 该<router-view>只能放指定name的组件 -->
	<router-view name="left"></router-view>
	<router-view name="main"></router-view>
</div>

ps:下面介绍下vue-router的原理

更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式:

(1)利用URL中的hash("#");

(2)利用History interface在HTML5中新增的方法;

1、Hash模式: 

      hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;

2、History模式: 

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;

通常情况下,我们会选择使用History模式,原因就是Hash模式下URL带着‘#'会显得不美观;但实际上,这样选择一不小心也会出问题;比如:

但当用户直接在用户栏输入地址并带有参数时: 
Hash模式:xxx.com/#/id=5 请求地址为 xxx.com,没有问题; 
History模式: xxx.com/id=5 请求地址为 xxx.com/id=5,如果后端没有对应的路由处理,就会返回404错误; 

为解决这一问题,vue-router提供的方法是:

在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。 

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果你使用 Node.js 服务器,你可以用服务端路由匹配到来的 URL,并在没有匹配到路由的时候返回 404,以实现回退。

到此这篇关于Vue中通过vue-router实现命名视图的问题的文章就介绍到这了,更多相关vue vue-router命名视图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
使用node.js搭建服务器
May 20 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
浅谈vue权限管理实现及流程
Apr 23 #Javascript
js实现简单的贪吃蛇游戏
Apr 23 #Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
You might like
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php并发加锁示例
2016/10/17 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
活动邀请函范文
2014/01/19 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
开平碉楼导游词
2015/02/06 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
员工担保书范本
2015/09/22 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL