一、作用域插槽

子元件上有資料，html程式碼結構由父元件來提供

子元件：

<template>
    <div>
        <h1>子元件</h1>
        <!-- 子元件上有資料，但是具體的html結構是什麼不確定 -->
        <ul>
            <slot v-for="item of arr" name="list" :val="item"></slot>
        </ul>
    </div>
</template
 
>

<script>
export default {
    data(){
        return{
            arr:['web前端','ui設計','大資料']
        }
    }
}
</script>

父元件：

<template>
    <div>
        <h1>父元件</h1>
        <!-- 父元件使用子元件時，提供具體的html結構 -->
        <v-child>
            <!-- 
                腳手架中v-for和v-if不建議混在一起用，所以這裡用了template標籤
                v-slot:插槽名稱="形參"
                形參用來獲取子元件傳遞過來的資料 
            
 
-->
            <template v-slot:list="props">
                <li>{{ props.val }}</li>
            </template>
        </v-child>
    </div>
</template>

<script>
import vChild from './Child'
export default {
    components:{
        vChild
    }
}
</script
 
>

二、路由【重點】

1、介紹

Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。

• 巢狀的路由/視圖表
• 模組化的、基於元件的路由配置
• 路由引數、查詢、萬用字元
• 基於 Vue.js 過渡系統的檢視過渡效果
• 細粒度的導航控制
• 帶有自動啟用的 CSS class 的連結
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

2、安裝

(1)初始化專案選擇安裝vue-router

　　Install vue-router? (Y/n) y

(2)手動安裝

　　npm i vue-router --save

3、基本使用

在/src/main.js中編寫程式程式碼

• 第一步：引入vue-router外掛

import VueRouter from 'vue-router'

• 第二步：vue使用vue-router

Vue.use(VueRouter)

vue使用vue-router，此時vue例項上會增加$route和$router兩個配置選項，但是內容是undefined

• 第三步：引入需要使用的頁面元件

import vIndex from './components/Index'
import vOrder from './components/Order'

• 第四步：例項化vuerouter並設定路由對映表關係

var router = new VueRouter({
    //定義路由對映配置表
    routes:[
        { path:'/index',component:vIndex },
        { path:'/order',component:vOrder }
    ]
})

• 第五步：在vue例項上增加一個router配置選項

new Vue({
  el: '#app',
  components: { App },
//   router:router,
    router,
  template: '<App/>'
})

• 第六步：在App.vue中新增路由出口

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

4、路由導航

①內建元件

router-link

它會生成一個a標籤，需要新增一個to屬性，屬性值是path屬性的內容

非必要屬性active-class，設定啟用狀態的類名

• active-class 模糊匹配
• exact-active-class 精確匹配

<router-link exact-active-class="active" to="/">首頁</router-link>
<router-link active-class="active" to="/user">使用者管理</router-link>
<router-link active-class="active" to="/info">個人資訊</router-link>

②程式設計式導航

$router

• push：把已訪問的路由規則新增到歷史記錄中，並跳轉頁面
• replace：把指定的路由規則替換到已訪問的歷史記錄中，並跳轉頁面
• go(-1)：回退

　例：

　　【/index，/order】 push ->order

　　【/index，/music】 replace ->music

5、路由重定向

{ path:'*',redirect:'/重定向目標路由規則' }

星號是萬用字元，表示沒有匹配到任何一個路由規則。

redirect屬性的內容是path屬性的屬性值，只有加上了redirect屬性，當訪問一個不存在的路由規則時，瀏覽器地址重新定向到指定的路由規則地址上。

6、路由巢狀

　　①建立幾個頁面元件

　　②在原有的一級路由規則上新增一個children屬性，作為它的子級路由規則

export default new Router({
    //定義路由對映配置表
    routes: [
        { 
            // 一級路由規則要以斜槓開頭
            path: '/index', 
            component: Index,
            children:[
                // 二級路由規則，不需要寫斜槓
                { path:'food',component:Food },
                { path:'movie',component:Movie }
            ]
        },
        { path: '/order', component: Order },
        { path:'/music',component:Music },
        { path:'*',redirect:'/index' }
    ]
})

　　③在一級路由規則對應的頁面元件中要有路由出口

<div class="index">
    <!-- 二級路由導航，to屬性必須要把一級路由規則和二級路由規則都補全 -->
    <router-link to="/index/food">美食</router-link>
    <router-link to="/index/movie">電影</router-link>
    <router-view></router-view>
</div>

7、路由傳參

(1)動態路由

　　①建立一個使用者詳情頁面元件

　　②定義一個動態路由規則，指向使用者詳情頁面元件

　　/src/router/index.js

 { path:'user/:uid',component:UserInfo }

　　③在使用者表格頁面點選編輯按鈕進行頁面跳轉

<button @click="toInfo(useritem.id)" class="btn btn-primary">編輯</button>

methods:{
    toInfo(uid){
        this.$router.push('/user/'+uid)
    }
}

　　④在使用者詳情頁面獲取路由引數

<p>編號：{{ $route.params.uid }}</p>

(2)查詢引數

當路由中引數數量不固定時，可以使用查詢引數方式

查詢引數和動態路由不能混用

　　①設定一個固定路由規則

{path:'user/info',component:UserInfo}

　　②在使用者表格頁面跳轉時使用qs外掛

<script>
import qs from 'qs'
export default {
    methods:{
        toInfo(uid){
            // 通過$router進行頁面跳轉
            // this.$router.push('/user/'+uid.id+'/'+uid.phone)
            this.$router.push('/user/info?'+qs.stringify(uid))
        }
    }
}
</script>

　　③在使用者詳情頁面獲取路由引數

<p>編號：{{ $route.query.id }}</p>
<p>手機號：{{ $route.query.phone }}</p>
<p>姓名：{{ $route.query.name }}</p>

三、路由進階

1、路由模式

• hash，預設模式，在瀏覽器地址中有#，#號後面的內容會被解析成路由規則，當路由規則變化時，不會重新發起網路請求。
• history，在瀏覽器地址中沒有#，利用html5中的historyApi進行頁面跳轉。打包的專案，部署上線時，需要後端配置web伺服器的轉發規則，不然會出現404。

2.路由命名

　　在定義路由規則時，可以給指定的路由規則設定一個name屬性

// { path:'user/:uid/:phone',component:UserInfo },
{
    path:'user/info',
    component:UserInfo,
    name:'xiangqing'
}

　　在進行頁面跳轉時，可以使用name屬性作為路由的標識

export default {
    methods:{
        toInfo(uid){
            // 通過$router進行頁面跳轉
            // this.$router.push('/user/info?'+qs.stringify(uid))
            this.$router.push({
                name:'xiangqing',
                query:uid
            })
        }
    }
}
</script>

3、路由別名

　　alias

{ 
    path:'/login',
    component:Login,
    alias:'/denglu'
}

別名設定好之後，原來的路由規則和別名都可以訪問。