VUE進階

vue-router

1、安裝

npm i vue-router

2、註冊

 1 import VueRouter from 'vue-router';
 2 
 3 //1、註冊
 4 Vue.use(VueRouter);
 5 //2、建立一個路由物件
 6 let router=new VueRouter({
 7   //所有的路由對映，沒一個路由就是一個物件
 8   routes:[
 9     {
10       path:"/",
11       name:'Main',
12       component:Main
13     }
14 
15   ]
16 })

queryString

待完善

路由守衛

元件內路由守衛

在元件內部定義

 1 // 跟methods: {}等同級別書寫，元件路由守衛是寫在每個單獨的vue檔案裡面的路由守衛
 2 beforeRouteEnter (to, from, next) {
 3     // 注意，在路由進入之前，元件例項還未渲染，所以無法獲取this例項，只能通過vm來訪問元件例項
 4     next(vm => {})
 5 }
 6 beforeRouteUpdate (to, from, next) {
 7     // 同一頁面，重新整理不同資料時呼叫，
 8 }
 9
 
 beforeRouteLeave (to, from, next) {
10     // 離開當前路由頁面時呼叫
11 }

每個守衛方法接收三個引數：

• to: Route: 即將要進入的目標 路由物件

• from: Route: 當前導航正要離開的路由

• next: Function:回撥函式

全域性路由守衛

在全域性的router檔案中定義

router.beforeEach((to, from, next) => {
console.log(to) => // 到哪個頁面去？
console.log(from) => // 從哪個頁面來？
next() => // 一個回撥函式
}
router.afterEach（to，from） = {}

路由過渡的進度

npm nprogress

<transition name="fade">
  <router-view/>
</transition>
...
</template>
<style>
.fade-enter-active {
  transition: opacity .5s;
}
.fade-leave-active {
  transition: none;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

打包

npm run build

會在專案根目錄下生成一個dist的資料夾

巢狀路由

router

 1  {
 2       path:'/user',
 3       name :'User',
 4       component:User,
 5       children:[
 6         {
 7           path:'profile',
 8           name:'Profile',
 9           component:Profile
10         },
11         {
12           path:'cart',
13           name:'Cart',
14           component:Cart
15         }
16       ]
17     }

view

user.vue

 1 <template>
 2     <div>
 3         <h3>使用者中心</h3>
 4         <ul class="left">
 5             <!-- 這是硬編碼 -->
 6             <!-- <router-link tag="li" to="/user/profile">基本資訊</router-link>
 7             <router-link tag="li" to="/user/cart">我的購物車</router-link> -->
 8             <!-- 可以改為下面這種非硬編碼 -->
 9              <router-link tag="li" :to="{name:'Profile'}">基本資訊</router-link>
10             <router-link tag="li" :to="{name:'Cart'}">我的購物車</router-link>
11         </ul>
12         <!-- <div class="right"> -->
13             <router-view></router-view>
14         <!-- </div> -->
15     </div>
16 </template>
17 
18 <script>
19 export default {
20     'name':'User'
21 }

cart.vue

1 <template>
2     <div>使用者購物車列表</div>
3 </template>
4 
5 <script>
6 export default {
7     name:'Cart'
8 }
9 </script>

profile.vue

1 <template>
2     <div>使用者資訊列表</div>
3 </template>
4 
5 <script>
6 export default {
7     name:'Provile'
8 }
9 </script>

設定預設子路由

// 如果需要設定預設子路由，那麼path就可以留空，同時父級的name不需要設定

 1 {
 2       path:'/user',
 3       // name :'User',
 4       component:User,
 5       children:[
 6         {
 7           path:'',
 8           // name:'Profile',
 9           name:'User',
10           component:Profile
11         },
12         {
13           path:'cart',
14           name:'Cart',
15           component:Cart
16         }
17       ]
18     }

限制CSS作用域

用過scoped

 1 <style scoped>
 2 .left {
 3     float: left;
 4     width: 200px;
 5 }
 6 .left li {
 7     line-height: 30px;
 8     cursor: pointer;
 9 }
10 </style>

重定向

一般有兩種應用場景

• 臨時改了地址

• 許可權問題

案例

現有一小說網站，提供了 男生頻道 和 女生頻道 的兩個入口，使用者首次進入頁面的時候，會出現選擇，並記住使用者的選擇，以後該使用者進入網站直接根據記錄的選擇進入對應的頻道

元件

1 // BookChoose.vue
2 <template>
3     <div>
4         <router-link :to="{name: 'book-boy'}">男生</router-link>
5         <span> | </span>
6         <router-link :to="{name: 'book-girl'}">女生</router-link>
7     </div>
8 </template>

 1 // BookBoy.vue
 2 <template>
 3     <div>
 4         BookBoy
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     name: 'BookBoy',
11     created() {
12         localStorage.setItem('book-type', 'book-boy');
13     }
14 }
15 </script>

 1 // BookGirl.vue
 2 <template>
 3     <div>
 4         BookGirl
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     name: 'BookGirl',
11     created() {
12         localStorage.setItem('book-type', 'book-girl');
13     }
14 }
15 </script>

路由配置

 1 {
 2   path: '/book',
 3   name: 'book',
 4   // redirect: { name: 'book-choose' }
 5   redirect: to => {
 6     let type = localStorage.getItem('book-type')
 7     return { name: type || 'book-choose' }
 8   }
 9 },
10 {
11   path: '/book-choose',
12   name: 'book-choose',
13   component: BookChoose
14 },
15 {
16   path: '/book-boy',
17   name: 'book-boy',
18   component: BookBoy
19 },
20 {
21   path: '/book-girl',
22   name: 'book-girl',
23   component: BookGirl
24 }

路由的滾動行為

前端路由並沒有過載整個瀏覽器，只是通過 DOM 進行了區域性更新。所以，有的時候，瀏覽器的一隻狀態會被保持，比如 滾動條，當我們在一個頁面中滾動滾動條，然後跳轉到另外一個頁面，滾動條會保持在上一個頁面中，我們其實更希望滾動條能回到頁面頂部，就像過載了整個頁面一樣

1 const router = new VueRouter({
2   routes: [...],
3   scrollBehavior: () => ({ y: 0 })
4 });

正對 後退/前進 行為，會提供一個 savedPosition 引數，通過該引數返回歷史記錄中的滾動值

1 scrollBehavior (to, from, savedPosition) {
2   // console.log(savedPosition)
3   if (savedPosition) {
4     return savedPosition
5   } else {
6     return { x: 0, y: 0 }
7   }
8 }

vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

這個狀態自管理應用包含以下幾個部分：

• state，驅動應用的資料來源；

• view，以宣告方式將 state 對映到檢視；

• actions，響應在 view 上的使用者輸入導致的狀態變化。

state

天生具有名稱空間

mutations

支援同步呼叫

actions

支援非同步呼叫

mapState

可以傳入陣列，示例

1    computed: mapState(['user'])

將倉庫中state中對應的'user' 賦值給計算屬性的user

也可以傳入物件，適用於有名稱空間的

示例

1 //傳入物件，適合有名稱空間的
2     computed:mapState({
3         user:(state)=>{
4             console.log(state);
5             return state.userModule.user;
6         }
7     })

程式碼示例

/router/user.js

 1 export default{
 2     state:{
 3         name:'',
 4         user:null
 5     },
 6     mutations:{
 7         uploadUser(state,payload){
 8             // console.log("mutations:name",name);
 9             state.user=payload
10         }
11     },
12     actions:{
13         async login(store,payload){ 
14             // try {
15                 let rs= await api.login(payload);
16                 store.commit('uploadUser',rs.data);
17                 localStorage.setItem("user",JSON.stringify(rs.data));
18                 localStorage.setItem("token",rs.headers.authorization);
19             // } catch (e) {
20             //     throw e;
21             // }
22                
23         }
24     }
25 
26 }

/router/index.js

 1 import  Vue from 'vue';
 2 import Vuex from 'vuex';
 3 
 4 Vue.use(Vuex);
 5 
 6 import user from './user.js';
 7 const store =new Vuex.Store({
 8    modules: {
 9        userModule:user
10    }
11 
12 })
13 
14 export default store;

客戶端呼叫

1      await this.$store.dispatch('login', this.submitData);

應用部署

1、打包

把專案執行過程中的資源進行整理（編譯、解析......過程）

命令：npm run build

2、部署

把程式碼放到不同的環境下執行

• 本地部署

• 測試環境部署

• 生產環境部署

無論何種環境，首先我們需要準備（搭建）一個用來提供web服務的WebServer

3、WebServer的搭建

• nodejs來搭建

• nginx

• apache

• iis

• ......