day27 vue的路由实现及sass
路由
前端路由
根据对应的url地址来渲染不同的内容
前端路由的分类
-
页面路由 （通过页面的跳转来完成对应的切换（刷新页面））
-
hash路由（通过对应的hash值变化来控制内容的渲染(onhashchange)(页面不刷新 只有一个页面)）
-
histroy路由（通过对应的地址的变化来控制内容的渲染（onpopstate）(页面不刷新 只有一个页面)）
SPA
单页应用程序,只有一个页面，控制渲染内容来完成对应的页面内容的切换，一个页面的设计的好处在于对应的页面切换的操作不再依赖于刷新（减少了页面的重绘和回流操作），单独一个页面打出来的包的大小也相对较小。单页应用的坏处在于不利于seo（电商网站不可能使用SPA）react和vue 都是为了减少对应的重绘和回流提高对应的性能。所以他一般都是采用对应的单页页面应用。所以主要采用的路由的模式为hash路由、history路由。默认情况下为hash模式。
后端路由
根据对应的访问地址返回不同数据 或渲染不同的内容
SSR
服务器渲染，服务器渲染的话他也有对应的好处 利于seo，速度快。坏处在于代码量大维护起来较为困难，对于服务器压力大
一般的大型电商网站都是采用ssr配合对应的SPA来共同作用。（前端采用的是vue的技术栈 配合ssr的框架 nuxt.js 前端采用的是react 配合的是next.js）
hash路由
vue中的hash实现
利用onhashchange事件监听hash值的变化
通过对应的routes规则
history路由
onpopstate进行监听
将a的内容全部重写（通过pushState来完成）
Sass
sass概述
sass是一个预编译css，和less(底层实现是js)属于一样的东西，他底层采用的是python环境Ruby语言书写，支持基本的css语法，最终还是会编译为css，他在node环境中不需要手动编译它会自动编译（sass-load的包）。
sass的编译环境
借助node来进行编译
按照对应的sass及sass-load
npm i sass, sass-load
借助第三方插件来进行编译
配置对应的easy sass (你需要将sass保存到什么地方 什么时候进行编译)
sass的书写
sass后缀（以缩进为区分 跟less一样） scss后缀（跟css语法一致）
sass的相关应用内容
支持变量定义 使用$
$color:#0f0
div{
color:#color
}
支持运算符
$size:10px;
.content{
font-size:$size*10;
width:$size+10;
hight:$size - 5;// 减号要隔开
}
支持注释
// 单行注释 单行注释不被编译
/**/ 多行注释 文档注释 会被编译
支持条件判断
@if expr{}
$width:100px;
.context{
@if $width>100{
width: $width - 10;
}
@else{
width:$width + 10
}
}
循环
@for
@for $i from 12 to 20{// 不包含20
// 变量占位符#{}
.item_#{$i}{
font-size: $i+px;
}
}
函数（为了获取返回值）
混入器（为了设置对应的内容）
@mixin 设置
@include 引入
模块化
@import
继承
@extend 实现继承