路由
前端路由：根据对应路由地址渲染不同的内容
前端路由的分类：1.页面路由（刷新）：根据地址访问不同的页面（location.href location.assign location.replace）
hash路由（不会刷新）：
1.根据对应的hash地址来渲染不同的内容（onhashchange）
2.location.hash 来获取对应的hash值 通过onhashchange进行监听
history路由（不会刷新）
根据对应的history页面的地址来渲染不同的内容（onpopstate）
通过replaceState和pushState来改变的值和页面的地址
通过history.back history.go history.forward来触发对应的onpopstate事件
后端路由：根据对应的路由地址访问对应的接口
SPA：单页应用程序（single page application），整个应用只有一个页面，对应的SPA路由实现主要是hash和history模式。在vue或者react中对于主要做SPA的应用的，主要采用hash和history，hash的监听能直接触发但是history的监听不能直接触发，所以默认的模式就是hash模式
Vue中的SPA路由
<body>
<div id="app">
<!-- 路由连接 to指定的地址 router-link会解析成a标签 -->
<router-link to="/">去首页</router-link>
<router-link to="/user">去用户页</router-link>
<!-- 路由视图 显示的视图 router-view会解析你对应需要渲染的内容 -->
<router-view></router-view>
</div>
<script>
//组件 渲染的内容
let home={
template:'<div>首页</div>'
}
//渲染的内容
let user={
template:'<div>用户页</div>'
}
//路由对象
let router=new VueRouter({
//路由配置 router路由对象 route路由配置 routers多个路配置
routes:[
//route规则
{
name:'home',//名字
path:'/',//路由地址
component:home//组件 渲染什么
},
{
name:'user',
path:'/user',
component:user
}
]
})
new Vue({
el:'#app',
router
})
</script>
</body>
hash模式路由实现
class VueRouter {
constructor(option) {
//获取传入的配置
this.routes = option['routes']
this.handlerLoad()
}
//处理hash改变的监听 需要渲染的元素
obServer(element) {
this.el = element
window.onhashchange = () => {
this.render()
}
}
render() {
let _this = this
//获取当前hash值 去除#
let hash = location.hash.slice(1)
//去this.routes比较
this.routes.forEach(route => {
if (hash == route.path) {
// _this.child?'': _this.child = _this.el.querySelector('router-view')
// //替换
// let template = document.createRange().createContextualFragment(route.component.template);
// //渲染对应的内容
// _this.el.replaceChild(template,_this.child)
// _this.child = template
_this.el.querySelector('router-view').innerHTML = route.component.template
}
});
}
//a标签变化
handlerLink() {
let _this = this
//获取所有的router-link
let linkList = this.el.querySelectorAll('router-link')
Array.from(linkList).forEach(link => {
//找到对应的to属性
let path = link.getAttribute('to')
//创建a标签 将他的to地址赋值href属性
let a = document.createElement('a')
a.href = "#" + path
a.innerHTML = link.innerHTML
_this.el.replaceChild(a, link)
})
}
//在打开的时候前面自动+#/
handlerLoad(){
window.onload = ()=>{
location.hash = '/'
}
}
}
class Vue {
constructor(option) {
this.el = document.querySelector(option.el)
this.router = option.router
this.router.obServer(this.el)
//第一次渲染
this.router.render()
this.router.handlerLink()
}
}
history模式路由实现
class VueRouter{
constructor(option){
this.routes=option.routes
}
obServer(element){
this.el=element
window.onpopstate=()=>{
this.render(location.pathname)
}
}
render(path){
let _this=this
this.routes.forEach(route => {
if(path==route.path){
let view=_this.el.querySelector('router-view')
view.innerHTML=route.component.template
}
});
}
handlerLoad(){
window.onload=()=>{
history.replaceState('','','./')
}
}
handlerLink(){
let _this=this
let list=[]
let linkList=this.el.querySelectorAll('router-link')
Array.from(linkList).forEach(link=>{
let path=link.getAttribute('to')
let a =document.createElement('a')
a.href=path
a.innerHTML=link.innerHTML
_this.el.replaceChild(a,link)
list.push(a)
})
list.forEach(a=>{
a.addEventListener('click',function(e){
e=e||window.event
e.preventDefault()
history.pushState('','',a.href)
_this.render(location.pathname)
})
})
}
}
class Vue {
constructor(option){
this.el=document.querySelector(option.el)
this.router=option.router
this.router.obServer(this.el)
this.router.render('/')
this.router.handlerLoad()
this.router.handlerLink()
}
}
Sass
概述：是预编译的css，核心还是css，css语法都支持，最终会编译成css，它的好处在于可以以js的方式书写css，和原生js的语法一样，同类的预编译的css还有less以及stylus，使用ruby语言书写。
使用方式
使用node进行sass的编译
npm i sass -D
sass sass文件名 文件名（css文件名）
使用第三方插件进行编译
vscode的第三方插件 easy sass、sass、live sass
sass的两种拓展名
sass以缩进作为区分
div
color:red
p
font-size:13px
scss跟正常的css一样
sass的相关应用
变量定义（$变量名：值）（记）
$color:red;
div{
background-color:$color
}
//编译结果
div{
background-color：$color
}
支持运算符（+ - * / %） *
样式关系
span,img{
padding: 10px;
}
.box{
background-color: red;
img{
width: 100px;
h1{
height: 100px;
}
}
}
#content{
color: yellow;
&:hover{
color: green;
}
.box{
font-size: 12px;
&:hover{
font-size: 18px;
}
}
}
//编译
.box {
background-color: red;
}
.box img {
width: 100px;
}
.box img h1 {
height: 100px;
}
#content {
color: yellow;
}
#content:hover {
color: green;
}
#content .box {
font-size: 12px;
}
#content .box:hover {
font-size: 18px;
}
插值表达式
#{变量名} 获取对应的变量值
if判断、for循环、while循环、for each遍历、函数
混入器（记）
@mixin a{
background:red;
}
@mixin border($size,$style,$color){
border: $size $style $color;
}
@mixin shadow($offsetleft:10px,$offsettop:20px,$width:30px,$color:green){
box-shadow: $offsetleft $offsettop $width $color;
}
div{
font-size: 18px;
@include a();
@include border(1px,solid,red);
@include shadow()
}
//编译结果
div {
font-size: 18px;
background: red;
border: 1px solid red;
box-shadow: 10px 20px 30px green;
}
导入（模块化思想）（记）
@import './test.scss';
div{
@include shadow()
}
注释
// 不会显示
/* */ 会显示
标签：el,hash,SASS,color,let,day27SPA,router,路由 From： https://www.cnblogs.com/zmfhtml5/p/16867249.html