vue的路由实现及sass

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 实现继承

sass和less的区别（面试题）