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{
// width: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>
浙公网安备 33010602011771号