2020-9-12,vue的路由进阶、路由守卫、stylus样式预处理器

内容：路由进阶、路由守卫、stylus样式预处理器

日期：2020-08-25

一、路由进阶

1.路由模式

/src/router/index.js，和routes平级的一个属性

默认模式是hash，在浏览器地址中会有一个#，#号后面的内容会被解析成路由规则，并进行匹配，如果匹配到指定的路由规则，则展示其对应的组件内容（页面不会刷新，只是局部内容发生了变化）。

history模式，最直观的是在浏览器地址中没有了#，它更多的使用html5中的history.pushState API来完成 URL 跳转而无须重新加载页面。项目打包后部署到服务器上需要配合后端（Nginx、Apache、Tomcat）进行重写规则的设置（不然会出现404）。

2.路由命名

每一个路由规则都可以设置一个name属性，在进行路由跳转并传递参数时，使用命名的路由会比较方便。

路由规则添加name属性：

{ 
    name:'xiangqing',
    path:'student/:id',
    component:StudentInfo 
}

在跳转页面时，使用name属性进行路由跳转及参数的传递

methods:{
    toInfo(id){
        // this.$router.push('/index/student/'+id)
        this.$router.push({
            name:'xiangqing',//通过路由name进行跳转
            params:{id:id}
        })
    }
}

3.路由别名

通过alias属性，可以给每一个路由规则设置一个别名，别名和path属性的路由都可以访问。

{ 
    path:'/login',
    component:Login,
    alias:'/denglu'
}

4.路由懒加载

import Index from '@/components/pages/Index'
import Login from '../components/pages/Login'
import Student from '../components/pages/Student'
import StudentInfo from '../components/pages/StudentInfo'
import Setting from '../components/pages/Setting'

这种方式会在vue加载vue-router配置文件时把对应的页面组件都加载一次，会造成资源消耗比较大。可以在路由规则中引入组件，实现匹配到指定的路由规则时才会加载对应的页面组件

{
	path:'/index',
	component:()=>import('../components/pages/Index')
}

5.路由守卫

路由守卫可以在路由规则执行之前或者之后执行一定的操作，从而实现对用户身份的验证。

(1)路由独享守卫

在定义路由规则时，可以给某一个路由规则设置守卫。

beforeEnter钩子函数会在某一个路由规则匹配到时，自动的触发，从而实现一定的验证效果

{ 
    path:'/关键词',
    component:()=>import('页面组件'),
    beforeEnter:(to,from,next)=>{
        ...
    }
}

在beforeEnter钩子函数中可以接收3个参数

①to 目标路由规则

②from 来源路由规则

③next 函数，用来执行默认的路由规则或者指定的路由规则

next();//执行默认路由规则
next(false)//终止路由规则的执行
 next('/index')//执行指定的路由规则

(2)组件守卫

①beforeRouteEnter

当路由规则匹配的组件被访问前，会自动的触发此钩子函数

示例代码：

在首页组件中来验证用户有没有登录，如果没有登录则只能访问到登录页面

<script>
export default {
    beforeRouteEnter(to,from,next){
        //如果本地存储中没有用户信息，则认为用户没有登录
        //用户没有登录的情况下，只能访问到登录页面
        var userinfo = localStorage.getItem('users');
        if(!userinfo){
            next('/login')
        }else{
            next();
        }
    }
};
</script>

②beforeRouteUpdate

在动态路由规则地址参数发生变化时，会自动的触发此钩子函数

示例代码：

beforeRouteUpdate(to, from, next) {
     console.log(to);
     console.log(from);
     console.log(next);
}

注意：路由模式是history时，不会触发此钩子函数

③beforeRouteLeave

当要离开某一个路由规则之前，会触发此钩子函数

示例代码：

<script>
    export default {
     	beforeRouteLeave(to, from, next) {
            if( window.confirm("确定要从此页面离开吗？")){
                next();
            }else{
                next(false)
            }
        }   
    }
</script>

(3)全局守卫

全局守卫会应用到项目中所有的路由规则

/src/router/index.js

①全局前置守卫

router.beforeEach((to,from,next)=>{…})

项目中所有的路由规则访问前会自动的触发此钩子函数

②全局后置守卫

router.afterEach((to,from)=>{…})

项目中所有的路由规则访问后会自动的触发此钩子函数

示例代码：

var router = new Router({...})
//全局前置守卫
router.beforeEach((to,from,next)=>{
    console.log('前置守卫...')
    //如果用户访问的不是登录页面，才去验证用户有没有登录
    //如果本地存储中没有用户信息，则认为用户没有登录
    //用户没有登录的情况下，只能访问到登录页面
    if(to.fullPath!='/login'){
        var userinfo = localStorage.getItem('users');
        if(!userinfo){
            next('/login')
        }else{
            next();
        }
    }else{
        next();
    }
})
//全局后置守卫
router.afterEach((to,from)=>{
    console.log('后置守卫...')
    console.log(to)
    console.log(from)
})
export default router;

二、stylus样式预处理器

1.官网

https://stylus.bootcss.com/

2.特性

富于表现力、动态的、健壮的 CSS

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量
• 插值（Interpolation）
• 混合（Mixin）
• 数学计算
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• Variable function calls
• 词法作用域
• 内置函数（超过 60 个）
• 语法内函数（In-language functions）
• 压缩可选
• 图像内联可选
• Stylus 可执行程序
• 健壮的错误报告
• 单行和多行注释
• CSS 字面量
• 字符转义
• TextMate 捆绑

3.安装

npm i stylus stylus-loader --save

4.引用

在页面组件中的style标签的开始标签中添加lang属性，属性值为stylus

<style lang="stylus">

5.使用

(1)基本使用

<style lang="stylus">
    .page
        width 100vw
        height 100vh
        display flex
        flex-direction column
        .top
            height 40px
            background skyblue
        .main
            flex 1
            background-color pink
            display flex
            .menu
                width:120px;
                background-color rgba(0,0,0,0.5)
                text-align center
                a
                    display block
                    text-decoration none
                    font-size 20px
                    padding 10px
                    color #fff
            .right
                flex 1
                background-color green
</style>

(2)变量的使用

在src目录下创建一个common文件夹，并创建一个css文件夹

再创建一个color.styl文件，在此文件中预先定义好几个颜色的变量

$color1 = #6f60aa
$color2 = #6950a1
$color3 = #9b95c9

在页面组件中的style代码中引入创建好的.styl文件，就可以在页面中使用相应的变量

<style lang="stylus">
@import('../../common/css/color.styl')
	.top
        height 40px
        background $color1

(3)函数的使用

创建一个fn.styl文件，在其中封装一些函数，把常用、重复使用的样式代码写在函数中

fullscreen(){
    width $width1
    height $height1
}

在页面组件中引入fn.styl就可以使用对应的函数

<style lang="stylus">
@import('../../common/css/fn.styl')
	.page
        fullscreen()