前端面试题:1.B/S架构和C/S架构;2定义vue-router的动态路由

简介: CS:C是英文单词Client首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即"客户端/服务器"模式,主要用于局域网内。它是一种软件系统体系结构,它是将需要处理的的业务合理的分配到客户端和服务器端,这样可以降低通信成本,但是升级相对困难,就像我们手机中安装的微信,qq,王者农药等应用程序都是C/S结构的。C/S架构软件有一个特点,就是如果用户要使用的话,要下载一个客户端,安装后就可以使用

文章目录
讲一下B/S架构和C/S架构的区别是什么
4、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
讲一下B/S架构和C/S架构的区别是什么
B/S: B是英文单词Browser的首字母,即浏览器的意思; S是英文单词Server的首字母,即服务器的意思。B/S就是Browser/Server的缩写,即浏
览器/服务器模式。
这种模式统一了客户端,让核心的业务处理在服务端完成.只要在电脑或手机上安装浏览器,就可以通过web Server与数据库进行数据交互了

CS:C是英文单词Client首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即"客户端/服务器"模式,主要用于局域网内。
它是一种软件系统体系结构,它是将需要处理的的
业务合理的分配到客户端和服务器端,这样可以降低通信成本,但是升级相对困难,就像我们手机中安装的微信,qq,王者农药等应用程序都是C/S结构的。
C/S架构软件有一个特点,就是如果用户要使用的话,要下载一个客户端,安装后就可以使用

区别:
1.硬件环境不同.C/S通常是建立在专用的网络上,小范围的网络环境,而B/S是建立在广域网.上的,适应范围强,通常有操作系统和浏览器就行。
2.C/S比B/S结构更安全,因为用户群相对固定,对信息的保护更强。
3.B/S结构维护升级比较简单,而C/s结构维护升级相对困难。

4、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
在路由path上配置动态参数,在前往的路由页面使用this.$route. .params截取携带过来的路由参数。

一.字符串写法
1.query参数

this.$router.push("/login/?k=1")
//跳转后的页面通过$route.query.k接收
1
2
2 params参数

this.$router.push("/login/" +this.keyword)
path: '/search/:keyword”
4 | //通过$ route.params.keyword接收
1
2
3
二对象写法
1.query参数

this.$router.push( {name : "login" , query: {keyword:this .keyword}})
//注意query传参对象写法必须给路由组件命名(加name属性)
1
2
2 params参数

this.$router.push({name:"login" ,params ; {keywo rd :this .keyword}}
//注意params传参对象写法必须给路由组件命名(加name属性)
1
2
三指定params参数可传可不传
1.在占位后面加个问号,就不会出现路径有问题

path: '/search/:keyword? '
1
2.如果传递的是空字符串,可以用undefined解决

this.srouter.push({

name: "login" , 
params:{ikeyword:this .keyword| lundefined}

})
1
2
3
4

目录
相关文章
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1037 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
836 1
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
409 3
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
396 1
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
2483 0
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
830 0
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
675 0
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
1127 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1260
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    572
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    434
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    436
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    549
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    727
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1414
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    315
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1168
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    509