1.插槽
1.1匿名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>52-Vue組件-匿名插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是插槽? 默認情況下使用子組件時在子組件中編寫的元素是不會被渲染的 如果子組件中有部分內容是使用時才確定的, 那么我們就可以使用插槽 插槽就是在子組件中放一個"坑", 以后由父組件來"填" 1.什么是匿名插槽 沒有名字的插槽, 會利用使用時指定的內容替換整個插槽 注意點: 如果有多個匿名插槽, 每一個匿名插槽都會被指定的內容替換 雖然寫多個匿名插槽不會報錯, 但是在企業開發中推薦只能有一個匿名插槽 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <!--需求: 在使用子組件的時候給子組件動態的添加一些內容--> <son> <!--注意點: 默認情況下是不能在使用子組件的時候, 給子組件動態的添加內容的 如果想在使用子組件的時候, 給子組件動態的添加內容, 那么就必須使用插槽--> <div>我是追加的內容1</div> <div>我是追加的內容2</div> <div>我是追加的內容3</div> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <!--這里的slot標簽就是插槽, 插槽其實就是一個坑 只要有了這個坑, 那么以后使用者就可以根據自己的需要來填這個坑--> <!--注意點: 插槽可以指定默認數據, 如果使用者沒有填這個坑, 那么就會顯示默認數據 如果使用者填了這個坑, 那么就會利用使用者填坑的內容替換整個插槽--> <!--匿名插槽的特點: 有多少個匿名插槽, 填充的數據就會被拷貝幾份,如下會將son中追加的內容填寫兩份 雖然我們可以指定多個匿名插槽, 但是在企業開發中推薦只寫一個匿名插槽--> <slot>我是默認數據</slot> <slot>我是默認數據</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.2 具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53-Vue組件-具名插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是具名插槽 默認情況下有多少個匿名插槽, 我們填充的數據就會被拷貝多少份 這導致了所有插槽中填充的內容都是一樣的 那么如果我們想給不同的插槽中填充不同的內容怎么辦呢? 這個時候就可以使用具名插槽 2.具名插槽使用 通過插槽的name屬性給插槽指定名稱 在使用時可以通過slot="name"方式, 指定當前內容用于替換哪一個插槽 注意點: 如果沒有指定要替換哪個插槽中的內容, 則不會被替換 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!--這里通過slot屬性告訴Vue,當前的內容是要填充到哪一個插槽中的--> <div slot="one">我是追加的內容1</div> <div slot="one">我是追加的內容11</div> <div slot="two">我是追加的內容2</div> <div slot="two">我是追加的內容22</div> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <!--可以在定義插槽的時候給插槽添加一個name屬性, 通過這個name屬性來指定插槽的名稱 如通插槽指定了名稱, 那么我們就稱之為具名插槽--> <!--注意點: 默認情況下填充的內容是不會被填充到具名插槽中的, 只有給填充的內容指定了要填充到哪一個具名插槽之后, 才會將填充的內容填充到具名插槽中--> <slot name="one">我是默認內容</slot> <slot name="two">我是默認內容</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.3 v-slot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-Vue組件-v-slot指令</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-slot指令? v-slot指令是Vue2.6中用于替代slot屬性的一個指令 在Vue2.6之前, 我們通過slot屬性告訴Vue當前內容填充到哪一個具名插槽 從Vue2.6開始, 我們通過v-slot指令告訴Vue當前內容填充到哪一個具名插槽 注意點: v-slot指令只能用在template標簽上 可以使用#號替代v-slot: --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!-- <template v-slot:one> <div>我是追加的內容1</div> <div>我是追加的內容11</div> </template> <template v-slot:two> <div>我是追加的內容2</div> <div>我是追加的內容22</div> </template> --> <!--v-bind: : v-on: @--> <template #one> <div>我是追加的內容1</div> <div>我是追加的內容11</div> </template> <template #two> <div>我是追加的內容2</div> <div>我是追加的內容22</div> </template> </son> </div> </template> <template id="son"> <div> <div>我是頭部</div> <slot name="one">我是one默認內容</slot> <slot name="two">我是two默認內容</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>1.4 作用域插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>55-Vue組件-作用域插槽</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是作用域插槽 作用域插槽就是帶數據的插槽, 就是讓父組件在填充子組件插槽內容時也能使用子組件的數據 2.如何使用作用域插槽 2.1在slot中通過 v-bind:數據名稱="數據名稱" 方式暴露數據 2.2在父組件中通過 <template slot-scope="作用域名稱"> 接收數據 2.3在父組件的<template></template>中通過 作用域名稱.數據名稱 方式使用數據 3.通過v-slot來使用作用域插槽 在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。 它取代了 slot 和 slot-scope 也就是說我們除了可以不僅可以通過v-slot指令告訴Vue內容要填充到哪一個具名插槽中 還可以通過v-slot指令告訴Vue如何接收作用域插槽暴露的數據 v-slot:插槽名稱="作用域名稱" --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son> <!-- 1.使用slot-scope來接收數據 slot-scope="abc"作用: 接收子組件插槽暴露的數據 作用域插槽的應用場景: 子組件提供數據, 父組件決定如何渲染 --> <template slot-scope="abc"> <li v-for="(name, index) in abc.names">{{name}}</li> </template> <!-- 2.使用v-slot來接收數據 作用域插槽的應用場景: 子組件提供數據, 父組件決定如何渲染 --> <template #one="abc"> <li v-for="(name, index) in abc.names">{{name}}</li> </template> </son> </div> </template> <template id="son"> <div> <div>我是頭部 {{names}}</div> <!-- v-bind:names="names"作用: 將當前子組件的names數據暴露給父組件 --> <slot v-bind:names="names">我是默認內容 {{names}}</slot> <div>我是底部</div> </div> </template> <script> // 父組件 Vue.component("father", { template: "#father", // 子組件 components: { "son": { template: "#son", data:function () { return { names: ["zs", "ls", "ww", "zl"] } } } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app' }); </script> </body> </html>
2.Vuex--共享數據
2.1 傳統傳遞數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>57-Vuex-基本使用</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是Vuex? vuex 是 Vue 配套的 公共數據管理工具，它可以把一些共享的數據，保存到 vuex 中， 方便整個程序中的任何組件直接獲取或修改我們的公共數據 注意點: 只有需要共享的才放到vuex上, 不需要共享的數據依然放到組件自身的data上 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son1 @parentchange="change"></son1> <son2 :parentnum="num"></son2> </div> </template> <template id="son1"> <div> <!--需求: 在第一個子組件中添加兩個按鈕和一個輸入框, 要求通過按鈕控制輸入框中的數據+1和-1--> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="count"> </div> </template> <template id="son2"> <div> <!--需求: 在第二個子組件中展示第一個子組件中的數據--> <!-- 注意點: 1.如果想要在子組件中使用父組件中的數據, 那么必須通過父組件傳遞 2.如果想要在子組件中使用祖先組件中的數據, 那么就必須一層一層的傳遞 3.兄弟組件之間不能直接傳遞數據, 如果兄弟組件之間想要傳遞數據, 那么就必須借助父組件 --> <!-- 注意點: 雖然通過借助父組件能夠實現兄弟組件之間的數據傳遞, 但是這種方式非常的復雜, 非常的不推薦 那么當前在企業開發中我們遇到了兩個問題: 1.如果想要在子組件中使用祖先組件中的數據, 那么就必須一層一層的傳遞(非常麻煩) 2.兄弟組件之間不能直接傳遞數據, 如果兄弟組件之間想要傳遞數據, 那么就必須借助父組件(非常麻煩) 解決方案: 使用Vuex --> <p>{{parentnum}}</p> </div> </template> <script> // 爸爸組件 Vue.component("father", { template: "#father", data: function(){ return { num: 0 } }, methods: { change(newCount){ this.num = newCount; } }, // 兒子組件 components: { "son1": { template: "#son1", data: function () { return { count: 0 } }, methods: { add(){ /* 如何實現兒子中的數據和父親中的數據同步 1.父親給兒子傳遞一個方法 2.在兒子中修改數據 3.兒子中修改完數據, 調用父親傳遞過來的方法, 并且將修改之后的數據傳遞給父親的方法 4.在父親的方法中保存最新的數據 * */ this.count = this.count + 1; this.$emit("parentchange", this.count); }, sub(){ this.count = this.count - 1; this.$emit("parentchange", this.count); } } }, "son2": { template: "#son2", props: ["parentnum"] } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { } }); </script> </body> </html>2.2 通過Vuex來共享數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>58-Vuex-共享數據</title> <script src="js/vue.js"></script> <!--1.導入Vuex--> <!--注意點: 在導入Vuex之前必須先導入Vue--> <script src="js/vuex.js"></script> </head> <body> <!-- 1.當前在企業開發中我們遇到了兩個問題: 1.如果想要在子組件中使用祖先組件中的數據, 那么就必須一層一層的傳遞(非常麻煩) 2.兄弟組件之間不能直接傳遞數據, 如果兄弟組件之間想要傳遞數據, 那么就必須借助父組件(非常麻煩) 解決方案: 使用Vuex 注意點: 必須在引入Vue之后再引入Vuex 只有需要共享的才放到vuex上, 不需要共享的數據依然放到組件自身的data上 --> <!--這里就是MVVM中的View--> <div id="app"> <grandfather></grandfather> </div> <template id="grandfather"> <div> <p>{{this.$store.state.msg}}</p> <father></father> </div> </template> <template id="father"> <div> <!--4.在使用Vuex中保存的共享數據的時候, 必須通過如下的格式來使用--> <p>{{this.$store.state.msg}}</p> <son></son> </div> </template> <template id="son"> <div> <p>{{this.$store.state.msg}}</p> </div> </template> <script> // 2.創建Vuex對象 const store = new Vuex.Store({ // 這里的state就相當于組件中的data, 就是專門用于保存共享數據的 state: { msg: "twc" }, }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { "grandfather":{ template:"#grandfather", // 3.在祖先組件中添加store的key保存Vuex對象 // 只要祖先組件中保存了Vuex對象 , 那么祖先組件和所有的后代組件就可以使用Vuex中保存的共享 數據了 store:store, components:{ "father":{ template:"#father", components: { "son": { template: "#son", } } } } } }, }); </script> </body> </html>2.3 修改Vuex共享數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>59-Vuex-修改共享數據</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <son1></son1> <son2></son2> </div> </template> <template id="son1"> <div> <!--需求: 在第一個子組件中添加兩個按鈕和一個輸入框, 要求通過按鈕控制輸入框中的數據+1和-1--> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="this.$store.state.count"> </div> </template> <template id="son2"> <div> <button @click="add">增加</button> <button @click="sub">減少</button> <input type="text" :value="this.$store.state.count"> </div> </template> <script> const store = new Vuex.Store({ // state: 用于保存共享數據 state: { count: 0 }, // mutations: 用于保存修改共享數據的方法 mutations: { // 注意點: 在執行mutations中定義的方法的時候, 系統會自動給這些方法傳遞一個state參數 // state中就保存了共享的數據 mAdd(state){ state.count = state.count + 1; }, mSub(state){ state.count = state.count - 1; } } }); // 爸爸組件 Vue.component("father", { template: "#father", store: store, // 兒子組件 components: { "son1": { template: "#son1", methods: { add(){ // 注意點: 在Vuex中不推薦直接修改共享數據 //我們可以通過this.$store.commit("方法名稱")來調用mutation中的方法 this.$store.commit("mAdd"); }, sub(){ this.$store.commit("mSub"); } } }, "son2": { template: "#son2", methods: { add(){ // 注意點: 在Vuex中不推薦直接修改共享數據 // 如果多個組件都修改了共享的數據, 那么后期數據發生了錯誤, 我們如果需要去調試錯誤 // 就需要把每一個修改了共享數據的組件都檢查一遍, 這樣非常低效, 非常的不利于我們去維護 // this.$store.state.count = this.$store.state.count + 1;(不行) this.$store.commit("mAdd"); }, sub(){ // this.$store.state.count = this.$store.state.count - 1; this.$store.commit("mSub"); } } } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { } }); </script> </body> </html>2.4 Vuex中的getter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>60-Vuex-getters</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <!-- 1.什么是Vuex的getters? Vuex的getters屬性就和組件的計算屬性一樣, 會將數據緩存起來, 只有數據發生變化才會重新計算 --> <!--這里就是MVVM中的View--> <div id="app"> <father></father> </div> <template id="father"> <div> <!-- {{this.$store.state.msg}} "www.it666.com"--> <!-- {{this.$store.state.msg}} "www.it666.com"--> <!-- {{this.$store.state.msg}} "www.it666.com"--> {{this.$store.getters.formart}} {{this.$store.getters.formart}} {{this.$store.getters.formart}} </div> </template> <script> const store = new Vuex.Store({ // state: 用于保存共享數據 state: { msg: "知播漁" }, // mutations: 用于保存修改共享數據的方法 mutations: { }, getters: { formart(state){ console.log("getters方法被執行了"); return state.msg + "www.it666.com" } } }); // 爸爸組件 Vue.component("father", { template: "#father", store: store, }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { } }); </script> </body> </html>
3.VueRouter
3.1 基本使用(通過a標簽設置hash)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>61-VueRouter-基本使用</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導入Vue Router--> <!--注意點: 必須先導入Vue之后再導入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是Vue Router? Vue Router和v-if/v-show一樣, 是用來切換組件的顯示的 v-if/v-show是標記來切換(true/false) Vue Router用哈希來切換(#/xxx) 比v-if/v-show強大的是Vue Router不僅僅能夠切換組件的顯示, 還能夠在切換的時候傳遞參數 2.Vue Router使用 2.1導入Vue Router 2.2定義路由規則 2.3根據路由規則創建路由對象 2.4將路徑對象掛載到Vue實例中 2.5修改URL哈希值 2.6通過<router-view>渲染匹配的組件 --> <!--這里就是MVVM中的View--> <div id="app"> <a href="#/one">切換到第一個界面</a> <a href="#/two">切換到第二個界面</a> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one" }; const two = { template: "#two" }; // 2.定義切換的規則(定義路由規則) const routes = [ // 數組中的每一個對象就是一條規則 { path: '/one1', component: one }, { path: '/two', component: two } ]; // 3.根據自定義的切換規則創建路由對象 const router = new VueRouter({ routes: routes }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創建好的路由對象綁定到Vue實例上 router: router, // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { one: one, two: two } }); </script> </body> </html>3.2 router-link設置hash
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>62-VueRouter-基本使用</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } /*.router-link-active{*/ /* background: red;*/ /*}*/ .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導入Vue Router--> <!--注意點: 必須先導入Vue之后再導入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是router-link? 通過a標簽確實能設置URL的hash,但是這種方式并不專業 在Vue Router中提供了一個專門用于設置hash的標簽 router-link 2.router-link特點 默認情況下Vue會將router-link渲染成a標簽, 但是我們可以通過tag來指定到底渲染成什么 3.給router-link設置選中樣式 默認情況下我們可以通過重寫router-link-active類名來實現設置選中樣式 但是我們也可以通過linkActiveClass來指定選中樣式 4.重定向路由 { path: '被重定向值', redirect: '重定向之后的值' } --> <!--這里就是MVVM中的View--> <div id="app"> <!-- <a href="#/one">切換到第一個界面</a> <a href="#/two">切換到第二個界面</a>--> <!-- 如果是通過router-link來設置URL的HASH值, 那么不用寫#, 那么是通過to屬性來設置HASH值 --> <!-- 默認情況下Vue在渲染router-link的時候, 是通過a標簽來渲染的 如果在企業開發中不想使用a標簽來渲染, 那么可以通過tag屬性來告訴vue通過什么標簽來渲染 --> <router-link to="/one" tag="div">切換到第一個界面</router-link> <router-link to="/two" tag="div">切換到第二個界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one" }; const two = { template: "#two" }; // 2.定義切換的規則(定義路由規則) const routes = [ // 重定向路由 //{ path: '/', redirect: '/two' }, // 數組中的每一個對象就是一條規則 { path: '/one', component: one }, { path: '/two', component: two } ]; // 3.根據自定義的切換規則創建路由對象 const router = new VueRouter({ routes: routes, // 指定導航激活狀態樣式類名 linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創建好的路由對象綁定到Vue實例上 router: router, // 專門用于定義局部組件的 components: { //one: one, //two: two } }); </script> </body> </html>3.3 傳遞參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>63-VueRouter-參數傳遞</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } /*.router-link-active{*/ /* background: red;*/ /*}*/ .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.Vue Router傳遞參數 只要將Vue Router掛載到了Vue實例對象上, 我們就可以通過vue.$route拿到路由對象 只要能拿到路由對象, 就可以通過路由對象拿到傳遞的參數 方式一: 通過URL參數參數(?key=value&key=value), 通過this.$route.query獲取 方式二: 通過占位符傳遞(路由規則中/:key/:key, 路徑中/value/value), 通過this.$route.params獲取 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- 第一種傳遞參數的方式: 通過URL參數的方式傳遞 在指定HASH的時候, 通過?key=value&key=value的方式傳遞 在傳遞的組件的生命周期方法中通過 this.$route.query的方式來獲取 --> <router-link to="/one?name=lnj&age=33" tag="button">切換到第一個界面</router-link> <!-- 第二種傳遞參數的方式: 通過路由規則中的占位符傳遞 在指定路由規則的時候通過/:key/:key的方式來指定占位符 在指定HASH的時候, 通過/value/value的方式來傳遞值 在傳遞的組件的生命周期方法中通過 this.$route.params的方式來獲取 --> <router-link to="/two/zs/66" tag="button">切換到第二個界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one", created: function () { console.log(this.$route); console.log(this.$route.query.name); console.log(this.$route.query.age); } }; const two = { template: "#two", created: function () { console.log(this.$route); console.log(this.$route.params.name); console.log(this.$route.params.age); } }; // 2.定義切換的規則(定義路由規則) const routes = [ // 數組中的每一個對象就是一條規則 { path: '/one', component: one }, { path: '/two/:name/:age', component: two } ]; // 3.根據自定義的切換規則創建路由對象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', router:router, // 專門用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>3.4 嵌套路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>64-VueRouter-嵌套路由</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 500px; height: 500px; } .onepage{ background: pink; } .twopage{ background: skyblue; } .onesub1page, .onesub2page{ width: 100%; height: 300px; } .onesub1page{ background: orangered; } .onesub2page{ background: blueviolet; } .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是嵌套路由? 嵌套路由也稱之為子路由, 就是在被切換的組件中又切換其它子組件 例如: 在one界面中又有兩個按鈕, 通過這兩個按鈕進一步切換one中的內容 --> <!--這里就是MVVM中的View--> <div id="app"> <router-link to="/one" tag="button">切換到第一個界面</router-link> <router-link to="/two" tag="button">切換到第二個界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個界面</p> <router-link to="/one/onesub1" tag="button">切換到第一個子界面</router-link> <router-link to="/one/onesub2" tag="button">切換到第二個子界面</router-link> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </template> <template id="onesub1"> <div class="onesub1page"> <p>我是第一個界面子界面1</p> </div> </template> <template id="onesub2"> <div class="onesub2page"> <p>我是第一個界面子界面2</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個界面</p> </div> </template> <script> // 1.定義組件 const onesub1 = { template: "#onesub1", }; const onesub2 = { template: "#onesub2", }; const one = { template: "#one", components:{ onesub1:onesub1, onesub2: onesub2 } }; const two = { template: "#two" }; // 2.定義切換的規則(定義路由規則) const routes = [ // 數組中的每一個對象就是一條規則 { path: '/one', component: one, children:[ { // 注意點: 如果是嵌套路由(子路由), 那么不用寫一級路徑的地址, 并且也不用寫/ path: "onesub1", component: onesub1 }, { // 注意點: 如果是嵌套路由(子路由), 那么不用寫一級路徑的地址, 并且也不用寫/ path: "onesub2", component: onesub2 } ] }, // { path: '/one/onesub1', component: onesub1 }, // { path: '/one/onesub2', component: onesub2 }, { path: '/two', component: two } ]; // 3.根據自定義的切換規則創建路由對象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創建好的路由對象綁定到Vue實例上 router: router, // 專門用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>3.5 命名視圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>66-VueRouter-命名視圖</title> <style> *{ margin: 0; padding: 0; } .onepage, .twopage{ width: 200px; height: 200px; } .onepage{ background: pink; } .twopage{ background: skyblue; } .nj-active{ background: skyblue; } </style> <script src="js/vue.js"></script> <!--1.導入Vue Router--> <script src="js/vue-router.js"></script> </head> <body> <!-- 1.什么是命名視圖? 命名視圖和前面講解的具名插槽很像, 都是讓不同的出口顯示不同的內容 命名視圖就是當路由地址被匹配的時候同時指定多個出口, 并且每個出口中顯示的內容不同 --> <!--這里就是MVVM中的View--> <div id="app"> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <!--和匿名插槽一樣, 如果指定了多個router-view, 那么當路由地址被匹配之后, 多個router-view中顯示的內容是一樣的--> <!--<router-view></router-view> <router-view></router-view>--> <!--和具名插槽一樣, 如果想同時顯示多個不同的組件, 那么可以給出口指定名稱 1.在路由規則中給組件起名稱 2.在出口中指定顯示哪個名稱的組件--> <router-view name="name1"></router-view> <router-view name="name2"></router-view> </div> <template id="one"> <div class="onepage"> <p>我是第一個界面</p> </div> </template> <template id="two"> <div class="twopage"> <p>我是第二個界面</p> </div> </template> <script> // 1.定義組件 const one = { template: "#one", }; const two = { template: "#two" }; // 2.定義切換的規則(定義路由規則) const routes = [ // 數組中的每一個對象就是一條規則 { path: '/', components: { name1: one, name2: two } }, ]; // 3.根據自定義的切換規則創建路由對象 const router = new VueRouter({ routes: routes, linkActiveClass: "nj-active" }); // 這里就是MVVM中的View Model let vue = new Vue({ el: '#app', // 4.將創建好的路由對象綁定到Vue實例上 router: router, // 這里就是MVVM中的Model data: { }, // 專門用于存儲監聽事件回調函數 methods: { }, // 專門用于定義計算屬性的 computed: { }, // 專門用于定義局部組件的 components: { one: one, two: two } }); // console.log(vue.$route); </script> </body> </html>
