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 相关文章推荐
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
javascript的push使用指南
Dec 05 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
layui 对table中的数据进行转义的实例
Sep 12 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
数据库的日期格式转换
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
js+div实现图片滚动效果代码
2014/02/10 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
javaScript基础详解
2017/01/19 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python实现登陆文件验证方法
2018/10/06 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
网络安全方面的面试题
2016/01/07 面试题
成考报名单位证明范本
2014/01/16 职场文书
英语商务邀请函范文
2014/01/16 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
中专生自荐信
2014/06/25 职场文书
城管个人总结
2015/02/28 职场文书
管理失职检讨书
2015/05/05 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技