有的时候想同时显示多个视图,而不是嵌套显示。比如后台管理系统页面布局
/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' } ] })
component:()=>import('../components/Index')
可以对路由访问时,进行验证或者拦截
/src/router/index.js中的某一个路由规则
{ path:'user', // 路由独享守卫 beforeEnter:function(to,from,next){ // next();//执行默认路由规则 // next('/login');//执行指定的路由规则 // next(false);//终止路由规则返回来源路由规则 next(); } }
只有/user这个路由规则会受到影响,其他路由均不受到影响
不同的路由规则可以指定到同一个页面组件,所以组件守卫的作用范围要比路由独享守卫要大。
- beforeRouteEnter:它和路由独享守卫的作用一样
- beforeRouteLeave:要进行路由地址切换时,会自动触发
- beforeRouteUpdate:在hash模式下,路由的参数值变化时,会自动触发
项目中任意路由规则访问之前或者访问之后都会触发全局守卫的钩子函数。
/src/router/index.js
/src/main.js
全局前置守卫
登录案例示例代码:
router.beforeEach((to,from,next)=>{ //验证用户登录状态,如果用户没有登录,则只能访问登录页面 if(to.fullPath === '/login'){ next(); }else{ var userinfo = localStorage.getItem('userinfo'); if(userinfo === null){ next('/login'); }else{ next(); } } })
富于表现力、动态的、健壮的 CSS
特性:
- 冒号可有可无
- 分号可有可无
- 逗号可有可无
- 括号可有可无
- 变量
- 插值(Interpolation)
- 混合(Mixin)
- 数学计算
- 强制类型转换
- 动态引入
- 条件表达式
- 迭代
- 嵌套选择器
- 父级引用
- Variable function calls
- 词法作用域
- 内置函数(超过 60 个)
- 语法内函数(In-language functions)
- 压缩可选
- 图像内联可选
- Stylus 可执行程序
- 健壮的错误报告
- 单行和多行注释
- CSS 字面量
- 字符转义
- TextMate 捆绑
npm i stylus-loader@3.0.2 stylus bootstrap@3 --save
main.js
import 'bootstrap/dist/css/bootstrap.css'
任意页面组件中使用stylus
<style lang="stylus"></style>
在任意页面组件中使用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>
- ①在/src/assets创建css目录,并在css目录中创建一个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>
第一步:创建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>