項目收尾

二級路由

個人中心采用二級路由

{
path: '/center',
component: Center,
//重定向
redirect:'/center/myorder',
// 添加元信息meta
meta: { show: true },
//二級路由組件children: [{//要么全寫'/center/myorder'，要么全不寫'myorder'path: '/center/myorder',component:MyOrder,},{path: 'mygroup',component:MyGroup,},]
},

未登錄全局路由守衛

else{next();
}

未登錄：不能去交易相關(trade)、支付相關(pay/paysuccess)、不能去個人中心(center/……)

 let toPath = to.path;//字符串類型
if (toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center')) {next('/login');
}

但是情況：如果用戶未登錄，然后點擊個人中心，然后跳轉到登錄，登錄完應該回到最初點擊的個人中心頁面，而不是每次都是home主頁

• 那么就需要先存儲點擊的路徑，然后再登錄完回到該路徑

1. 修改為：next('/login?redirect='+toPath)
   toPath為/center/myorder

2. 跳到登錄，此時路由為/login?redirect=%2Fcenter%2Fmyorder
   這是進行編碼后的,實際上編譯過來=/center/myorder

3. 可見進入登錄頁添加了query參數
   那么在點擊登錄時需要判斷一下是否有query參數，有則進行該路由跳轉，沒有才都是回到home首頁

//Login組件內userLogin修改//存儲需要跳轉的路徑(query參數中),沒有則是/home
let toPath = this.$route.query.redirect||'/home';
this.$router.push(toPath);

路由獨享守衛

1. 交易頁必須是從購物車頁點擊結算才能跳轉到，而不是可以直接在地址欄輸入就可以進入.( 支付頁也同理,必須是從交易頁pay而來)

{path: '/trade',component: Trade,// 添加元信息metameta: { show: true }, //獨享守衛：只管跳到trade路由的守衛beforeEnter: (to, from, next) => {if (from.path == '/shopcart') {next();} else {//從其他路由而來的,停留在當前next(false);}}
},

next(false);中斷當前的導航。如果瀏覽器的URL改變了(可能是用戶手動或者瀏覽器后退按鈕)，那么URL地址會重置到from路由對應的地址

2. 問題:
   當前頁是shopcart，然后再手動輸入trade仍然可以跳轉，但是不對，應該只有點擊<router-link class="sum-btn" to="/trade">結算</router-link>才能進入

• 解決:
  在shopcart路由信息meta中加一個flag，初始值為false。當點擊去結算按鈕觸發事件，flag置為true。然后在trade的獨享路由守衛中判斷一下flag是否為true，當flag為true時，則是通過點擊去結算按鈕跳轉的，然后放行。

 {path: '/trade',
component: Trade,
// 添加元信息meta
meta: { show: true ,falg:false}, 
//獨享守衛：只管跳到trade路由的守衛
beforeEnter: (to, from, next) => {if (from.path == '/shopcart' && from.mate.falg == true) {//跳轉后需要將原來flag置為falsefrom.meta.flag = false;next();} else {next(false);}}
},

路由跳轉寫成編程式路由跳轉

 methods: {toTrade() {this.$route.meta.flag = true;this.$router.push('/trade');}}

圖片懶加載

當服務器數據沒有返回時，頁面上顯示默認圖。

主要目的是延遲加載圖片，直到用戶滾動到圖片所在的位置時才加載。

查看vue-lazyload官方文檔
main.js

//引入vue-lazyload插件
import VueLazyload from 'vue-lazyload';
import Karry from '@/assets/Karry.gif';
//use()實質上觸發install安裝插件的方法
Vue.use(VueLazyload, {//可添加配置//1. 懶加載默認圖：(圖片和json文件是默認對外暴露的loading: Karry,
});

組件中<img v-lazy="image.src" />

路由懶加載

當打包構建應用時，js包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

原先是在router中配置路由信息前import組件，現在是在配置路由信息component時import。—路由懶加載

 {path:"/home",component:()=>import ('@/pages/Home'),meta:{show:true}
},

只有當用戶訪問該路徑時才執行箭頭函數，引入組件。使得路由跳轉更高效

打包上線

打包：npm run build

打包后(js文件夾)，代碼都是經過壓縮加密的,如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。
有了map就可以像未加密的代碼一樣,準確輸出是哪一行有錯

map文件也可以去除
在vue.config.js配置productionSourceMap: false即可。

重要知識點匯總

組件通信方式

1. props

①(非函數) 父傳子:
- 在父組件中如:<Floor v-for="floor in floorList" :key="floor.id" :list="floor" />在子組件上綁定屬性list，傳遞floor數據，子組件props:['list']接收
- props接受數據方式：數組[]或對象{list:Array}、{list:Array,default:[]}
② (函數)子傳父

// 子組件
<template>
<!--3.value雙向數據綁定,渲染接收過來的數據-->
<!--4.綁定原生事件input事件觸發updateValue回調--><input :value="value" @input="updateValue">
</template><script>
export default {
//2.子組件通過props接收數據props: ['value'],methods: {updateValue(event) {//5.輸入數據:調用觸發父組件的自定義input事件并傳值給父組件this.$emit('input', event.target.value);}}
}
</script>// 父組件
<template><div><!--1. 父組件的 message 初始為空字符串通過 v-model 將message作為value傳遞給子組件子組件輸入框顯示空值--><child-component v-model="message"></child-component><p>{{ message }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {message: ''};}
}
</script>

📌 v-model常規寫法（手動綁定 value 和 input）

<input	:value="message" 
@input="message = $event.target.value"
/>

? v-model 簡寫（推薦）

javascript <input v-model="message" />

完全等價于上面的寫法！ Vue 內部會自動將其編譯成 :value + @input 的形式。

實現：父組件 →（通過 props）→ 子組件 →（通過 $emit）→ 父組件 → 循環更新。

注意:在組件身上@綁定事件會被當做自定義事件,而不是原生DOM事件。如果想把自定義事件變為原生DOM事件加上修飾符.native
(那么該組件任何位置都會觸發click[假設綁定的是@click],原理其實是利用事件委派給該組件根標簽綁定了該原生DOM事件)

總結:原生DOM節點(如<input>、<button>)—原生事件,自定義組件—自定義事件

2. 自定義事件

$on和$emit:綁定事件、觸發事件
上面例子用到$emit，但是沒有用到$on,因為@input底層就是

this.$on('input', (value) => {this.message = value
})) // Vue 內部自動完成

3. 全局事件總線

main.js中:Vue.prototype.$bus = this
📌 為什么將this根實例掛載到$bus身上?
將根實例賦值給 Vue.prototype.$bus，使其成為全局可訪問的事件總線。而且根實例的原型鏈上有$on和$emit屬性，使其可訪問到。

4. 訂閱與發布pubsub

在react中運用較多

5. Vuex

6. 插槽

可以實現父子組件通信,一般是結構

sync修飾符

父組件給子組件傳值，而且給子組件綁定一個自定義事件(update:money)

<Child :money="money" @update:money="money = $event">

等價于

<Child :money.sync="money">

子組件props:[‘money’]接受,
第一種觸發寫法$emit('upate:money',money-100)
第二種$emit('update',money-100)

attrs和listeners屬性

1. $attrs:
   屬于組件的一個屬性,可以獲取到父組件傳遞過來的props數據

注意:如果是通過props接受的數據,那么在$atters中是獲取不到的

• 應用：封裝elementUI
  父組件：

//引入的子組件
//傳入靜態屬性:直接作為字符串寫入DOM
<HintButton type="success" icon="el-icon-delete" size="mini" title="提示按鈕"></HintButton>

子組件：

<template><div><!--a標簽的額外屬性title,可以鼠標懸停時,瀏覽器會自動顯示 title 的內容作為提示文本--><a :title="title"><!--那么el-button會顯示響應type屬性的樣式--><el-button :type="$attrs.type"></el-button></a></div>
</template>
<script>export default{name:"",props:["title"],mounted(){console.log(this.$attrs);//{type:'success',icon:'el-icon-delete',size:'mini'}}}
</script>

如果有大量屬性
可以<el-button v-bind="$attrs"></el-button>將所有接受的數據作為el-button的屬性。注意必須寫v-bind全稱，不能寫冒號

2. $listener:
   在父組件中給HintButton綁定自定義事件，子組件內可以通過$listener獲取到該自定義事件

//觸發自定義事件
<el-button v-on="$listener"></el-button>

同樣v-on不能簡寫為@

children和parent屬性

1. $children

在父組件:

<!--ref:可以獲取節點(組件標簽)-->
<Son ref = "son"/>
<Girl ref="girl"/>

this.$refs.son就是子組件實例：

那么就可以通過ref獲取到子組件里的數據

$children是組件的一個屬性，可以獲取當前組件的所有的子組件(Son和Girl)
打印:this.$children===>[VueComponent,VueComponent]
注意：該數組是無序的，this.$children[0]不一定是son

2. $parent
   在某個子組件內可以通過$parent獲取到該組件的父組件，那么就可以獲取到父組件的數據/方法

mixin混入

邏輯復用：mixin，可以將多個組件共用的邏輯、數據、方法等提取到一個單獨的對象中，然后在多個組件中混入使用

可以將mixin單獨出一個模塊然后對外暴露，在組件中直接import使用

// 定義一個 mixin
const myMixin = {data() {return {message: 'Hello from mixin!'}},methods: {greet() {console.log(this.message);}}
};// 在組件中使用 mixin
export default {mixins: [myMixin],created() {this.greet(); // 輸出: Hello from mixin!}
};

作用域插槽

elementUI主要就是作用域插槽

父組件:

<!--父組件向List子組件傳遞 todos 數組-->
<List :todos="todos"><template slot-scope = "todo"><span :style="color:todo.todo.isComplete?'green':'red'}">{{todo.todo.text}}</span></template>
</List><!---->
<script>
export default{data(){return {todos:[{id: 1, text: 'AA', isComplete:false},{id: 2, text: 'BB', isComplete:true},{id: 3, text: 'CC', isComplete:false},]}}
}</script>

子組件:

<ul><li v-for="(item,index) in todos" :key="index"><!--每個 item 通過 slot 回傳給父組件 --><slot :todo="item"></slot></li>
</ul><!--script中:List組件接收todos-->
props:['todos']

1. 核心概念:

• 子組件通過 <slot> 暴露數據給父組件（ :todo=“item”）
• 父組件通過 slot-scope = “todo” 接收子組件暴露的數據命名為todo

2. 關鍵點:
   （1）slot-scope 的命名
   父組件中 slot-scope="todo" 的 todo 是臨時變量名，可以任意命名（如 scope、data）
   實際接收的是子組件 <slot :todo="item"> 中 :todo 綁定的數據
   （2）數據結構
   子組件傳遞給slot-scope變量todo的數據結構：

{ todo: { id: 1, text: 'AA', isComplete: false } }

因此父組件中訪問的是 todo.todo.text（第一個 todo 是 slot-scope 變量，第二個 todo 是子組件綁定的屬性名[:todo=“item”])

總結:子組件的數據來源于父組件，子組件向父組件傳遞一個對象，父組件自定義子組件內部的部分渲染邏輯

在vue3中

在 Vue 3 中，slot-scope 被廢棄，改用 v-slot：

<List :todos="todos"><template v-slot="todo"><span :style="{color: todo.todo.isComplete ? 'green' : 'red'}">{{ todo.todo.text }}</span></template>
</List>

或解構寫法：

<template v-slot="{ todo }">  <!-- 解構 --><span :style="{color: todo.isComplete ? 'green' : 'red'}">{{ todo.text }}</span>
</template>