Vue小tips-d07
阿新 • • 發佈：2021-01-12
有的時候想同時顯示多個檢視，而不是巢狀顯示。比如後臺管理系統頁面佈局
/src/compoents/Index.vue
<template> <div class="page"> <!-- 具名檢視 只會展示指定的元件內容 不再根據瀏覽器地址進行匹配不同的元件 --> <router-view name="header"></router-view> <divclass="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 defaultnew 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 [email protected] 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>