vue-day07

一、路由进阶

1.命名视图

有的时候想同时显示多个视图，而不是嵌套显示。比如后台管理系统页面布局

/src/compoents/Index.vue

<template>
    <div class="page">
        <!-- 
            具名视图
            只会展示指定的组件内容
            不再根据浏览器地址进行匹配不同的组件 
        -->
        <router-view name="header"></router-view>
        <div class="main">
            <router-view name="nav"></router-view>
            <router-view name="main"></router-view>
        </div>
        <router-view name="bottom"></router-view>
    </div>
</template>

/src/router/index.js

import Index from '../components/Index'
import Login from '../components/Login'
import Header from '../components/Header'
import Main from '../components/Main'
import Bottom from '../components/Bottom'
import User from '../components/User'
import UserInfo from '../components/UserInfo'
import Nav from '../components/Nav'
import Profile from '../components/Profile'
export default new Router({
    mode:'hash',
    // mode:'history',
    //定义路由映射配置表
    routes: [
        {
            path:'/',
            component:Index,
            children:[
                { 
                    path:'',//path:''表示写了一级路由规则，但是没有二级路由规则
                    // 注意此处是components，不是component
                    components:{
                        // 视图名称:组件名称
                        header:Header,
                        nav:Nav,
                        main:Main,
                        bottom:Bottom
                    }
                },
                {
                    path:'user',
                    components:{
                        header:Header,//header视图展示的页面组件
                        nav:Nav,//nav视图展示的页面组件
                        main:User,//右侧展示的页面组件 
                        bottom:Bottom//bottom视图展示的页面组件
                    }
                },
                {
                    path:'user/info',
                    name:'xiangqing',
                    components:{
                        header:Header,
                        nav:Nav,
                        main:UserInfo,//右侧展示的页面组件 
                        bottom:Bottom
                    }
                },
                {
                    path:'info',
                    components:{
                        header:Header,
                        nav:Nav,
                        main:Profile,//右侧展示的页面组件 
                        bottom:Bottom
                    }
                }
            ]
        },
        { 
            path:'/login',
            component:Login,
            alias:'/denglu'
        }
    ]
})

2.路由懒加载

component:()=>import('../components/Index')

3.路由守卫【重点】

可以对路由访问时，进行验证或者拦截

to 目标路由规则信息

from 来源路由规则信息

next 函数，用来执行默认路由规则/指定的路由规则/终止路由规则返回来源路由规则

(1)路由独享守卫

/src/router/index.js中的某一个路由规则

{
    path:'user',
    // 路由独享守卫
    beforeEnter:function(to,from,next){
        // next();//执行默认路由规则
        // next('/login');//执行指定的路由规则
        // next(false);//终止路由规则返回来源路由规则
        next();
    }
}

只有/user这个路由规则会受到影响，其他路由均不受到影响

(2)组件守卫

不同的路由规则可以指定到同一个页面组件，所以组件守卫的作用范围要比路由独享守卫要大。

beforeRouteEnter，它和路由独享守卫的作用一样

beforeRouteLeave，要进行路由地址切换时，会自动触发

beforeRouteUpdate，在hash模式下，路由的参数值变化时，会自动触发

(3)全局守卫

项目中任意路由规则访问之前或者访问之后都会触发全局守卫的钩子函数。

/src/router/index.js

/src/main.js

全局前置守卫

beforeEach 所有的路由规则访问之前，自动触发

afterEach 所有的路由规则访问之后，自动触发，它只有两个参数，一般做一些记录操作

登录案例示例代码：

router.beforeEach((to,from,next)=>{
    //验证用户登录状态，如果用户没有登录，则只能访问登录页面
    if(to.fullPath === '/login'){
        next();
    }else{
        var userinfo = localStorage.getItem('userinfo');
        if(userinfo === null){
            next('/login');
        }else{
            next();
        }
    }
})

二、样式预处理器-stylus

1.介绍

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

特性：

• 冒号可有可无

• 分号可有可无

• 逗号可有可无

• 括号可有可无

• 变量

• 插值（Interpolation）

• 混合（Mixin）

• 数学计算

• 强制类型转换

• 动态引入

• 条件表达式

• 迭代

• 嵌套选择器

• 父级引用

• Variable function calls

• 词法作用域

• 内置函数（超过 60 个）

• 语法内函数（In-language functions）

• 压缩可选

• 图像内联可选

• Stylus 可执行程序

• 健壮的错误报告

• 单行和多行注释

• CSS 字面量

• 字符转义

• TextMate 捆绑

2.安装

npm i stylus-loader@3.0.2 stylus bootstrap@3 --save

3.引入

main.js

import 'bootstrap/dist/css/bootstrap.css'

任意页面组件中使用stylus

<style lang="stylus"></style>

4.基本使用

在任意页面组件中使用stylus编写样式代码

<style lang="stylus" scoped>
    // lang="stylus" 表示使用stylus样式预处理器
    // stylus 可以完美的兼容原生css语法
    // .page{
    //     100vw;
    //     height:100vh;
    // }
    // stylus新特性语法，靠缩进(空格)控制层级
    .page
        width 100vw
        height 100vh
        background-color rgba(0,0,0,0.5)
        position fixed
        .login
            width 500px
            height 300px
            background-color #fff
            margin 100px auto
            border-radius 20px
            h2
                padding-top 30px
            .btn
                width 100%
</style>

5.变量的使用

①在/src/assets创建css目录，并在css目录中创建一个color.styl

在color.styl文件中编写变量代码

$bgcolor1 = #2E8B57
$bgcolor2 = #3CB371
$bgcolor3 = #BDB76B

②在任意页面组件中引入color.styl文件并使用预先定义好的变量

登录页面

<style lang="stylus" scoped>
@import('../../assets/css/color.styl')
.page
    width 100vw
    height 100vh
    background-color $bgcolor1

后台管理系统页面布局页面

<style lang="stylus" scoped>
@import('../../assets/css/color.styl')
.page
    width 100vw
    height 100vh
    display flex
    flex-direction column
    .top
        height 50px
        background-color $bgcolor1
    .middle
        flex 1
        display flex
        .nav
            width 120px
            background-color $bgcolor2
            text-align center
            a
                display block
                text-decoration none
                color #fff
                padding 15px
        .right
            flex 1
    .bottom
        height 40px
        background-color $bgcolor3
</style>

6.函数的使用

第一步：创建fn.styl并编写函数代码，把复用的样式写在函数中

在/src/assets/css/创建一个fn.styl文件

在/src/assets/css/index.styl中引入fn.styl

getpage(){
    width 100vw
    height 100vh
    background-color rgba(0,0,0,0.5)
    position fixed
    left 0
    top 0
}
getcontent(){
    width $formwidth
    height $formheight
    background-color #fff
    margin 100px auto
    border-radius $radius
}

第二步：在登录页面中使用函数

/src/compoents/pages/Login.vue

<style lang="stylus" scoped>
@import('../../assets/css/index.styl')
    .page
        getpage()
        .login
            getcontent()
            h2
                padding-top 30px
            .btn
                width 100%
</style>

第三步：在其他页面组件中复用登录页面的样式

/src/components/view/del.vue

<style lang="stylus" scoped>
@import('../../assets/css/index.styl')
    .delitem
        display inline-block
        .page
            getpage()
            .content
                getcontent()
</style>