[真传弟子]JS-陈振华|2019年11月18日的日报-技能树.IT修真院

发表于： 2019-11-18 22:40:43

1 1093

今天完成的事：

重构路由守卫

准备复盘申请

复习CSS知识

1.CSS：Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet，用于设计网页风格。

2.CSS3的基本语法结构：

(1)CSS中注释为 /*内容*/

(2)CSS规则由选择器、声明组成。

(3)声明必须放在大括号{}中，声明可以是一或多条。

(4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如

h1{

font-size : 12px;

color : red;

}

</style>

3.在HTML中引入CSS样式的方式：

(1)行内样式：直接在标签中用style属性设置CSS样式。

(2)内部样式表：把css代码写在<head>的<style>中，规范化应写为<style type="text/css">

(3)外部样式表：文件扩展名为.css 在外部样式表中可直接写样式代码，不需要<style>标签。

a.链接式引用外部样式表(常用)：

<head>

</head>

b.导入式引用外部样式表：

<head>

<style>

@import url("外部样式表路径");

</style>

</head>

4.样式优先级："就近原则"，行内样式>内部样式表>外部样式表

当有很多样式时，用 !important 可以为某一个样式覆盖掉其他所有样式。

如 #textcolor{ clor:pink !important;}

5.CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名.

6.CSS3的基本选择器

(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}

(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签

(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容</标签>，但同一个id属性的选择器在页面中只能用一次。

7.基本选择器的优先级：ID选择器>类选择器>标签选择器

8.CSS3的高级选择器

1.层次选择器：

(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。

(2)子选择器A>B{ }：只能选择A的子元素。

(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素

(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。

(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似

(2)B:last-child 作为父元素的最后一个子元素B

(3)A B:nth-child(n) 在父级中查第n个子元素是不是B，不分类型

(4)B:first-of-type 选择父元素内B类型的第一个元素B

(5)B:last-of-type 选择父元素内B类型的最后一个元素B

(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

3.属性选择器：

(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性，但要同时存在)

(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签

(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串

(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串

(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

9.CSS3设置文本样式：

(1)<span>标签：用来设置行内元素(或几个文字)的样式。

(2)字体样式：

font-size：常用单位px

font-family：若同时设中英文字体，英文字体要设置在中文字体前面

font-style：normal标准、italic斜体、oblique倾斜

font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。

font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗

font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"

如 font:italic bold 36px "宋体";

(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"

10.Text-transform：控制文本的大小写：

none 默认，定义既有小写字母也有大写字母的标准文本(原文)

capitalize 每个单词以大写字母开头

uppercase 全部为大写字母

lowercase 全部小写字母

inherit 从父元素继承text-transform属性的值。

11.direction属性：规定文本的方向/书写方向。

ltr 文本方向从左到右

rtl 方向从右到左

inherit 继承父元素direction属性的值。

12.文字排版

(1)适用大多数浏览器：

从左向右 writing-mode: vertical-lr;

从右向左 writing-mode: vertical-rl;

(2)只适用IE浏览器:

从左向右 writing-mode: tb-lr;

从右向左 writing-mode: tb-rl

遇到的问题：

写路由守卫时把路由守卫写在了根组件下面

路由已经在根组件里引用了，使得路由守卫的路由已加载，没有起到在路由跳转前验证有无登入的效果，修改了

代码加载顺序，让路由守卫提前加载，在根组件前加载，就解决问题。

收获：

Vue-Router导航守卫：

有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。

为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的

全局守卫

vue-router全局有三个守卫：

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子进入路由之后

使用方法：

<code  ="" main.js="" 入口文件=""  import="" router="" from="" '.="" router';="" 引入路由=""  router.beforeeach((to,="" from,="" next)=">" {=""  next();=""  });=""  router.beforeresolve((to,=""  router.aftereach((to,="" from)=">"  console.log('aftereach="" 全局后置钩子');=""  });" {="" 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖="" ...=""  }=""  ]=""  })" 通过="" `vm`="" 访问组件实例`this`="" 执行回调的时机在mounted后面，=""  })=""  }<span="" 复制代码<="" span="" style="word-break: break-all;">

<code 我们可以这样跳转：next('path地址')或者next({path:''})或者next({name:''})="" 且允许设置诸如="" replace:="" true、name:="" 'home'="" 之类的选项="" 以及你用在router-link或router.push的对象选项。<="" code="" style="font-size: 12.6px; word-break: break-all;">导航离开该组件的对应路由时调用，我们用它来禁止用户离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。

<code  我们可以这样跳转：next('path地址')或者next({path:''})或者next({name:''})=""  且允许设置诸如="" replace:="" true、name:="" 'home'="" 之类的选项=""  以及你用在router-link或router.push的对象选项。<="" code="" style="word-break: break-all;"><code  =""  beforerouteleave="" (to,="" from="" ,="" next)="" {=""  if="" (文章保存)=""  next();="" 允许离开或者可以跳到别的路由="" 上面讲过了=""  }="" else=""  next(false);="" 取消离开=""  }<="" code="" style="word-break: break-all;">