59 slot槽口（插槽）、路由
一、slot槽口（插槽）
1.1概念
開辟一個插槽
組件嵌套的時候，組件標簽中的內容無法顯示。如果你非要顯示數據，那么就開辟一個槽口（插槽）
1.2槽口的創建方式
-
匿名槽口
父組件
<子組件>
內容
</子組件>
子組件
<slot></slot>
-
具名槽口
父組件
<子組件>
<div slot='自定義name1'>內容1</div>
<div slot='自定義name2'>內容2</div>
<div slot='自定義name3'>內容3</div>
</子組件>
子組件
<slot name='自定義name1' ></slot>
<slot name='自定義name2' ></slot>
<slot name='自定義name3' ></slot>
-
作用域槽口
父組件
<子組件>
<div slot-scope ='變量'>
//變量代表的是子組件數據的json串
</div>
</子組件>
子組件
<slot 自定義屬性1='數據1' 自定義屬性2='數據2' 自定義屬性3='數據3' ></slot>
二、路由
在vue前端框架中，渲染組件有兩種方式： 一通過組件嵌套實現組件渲染。二、通過路由渲染組件
2.1路由的概念
通過導航（path地址）跳轉渲染不同的組件
通過不同的地址渲染不同的內容
路由是vue的核心插件之一
官網地址：https://router.vuejs.org/zh/installation.html
2.2 安裝
一、通過下載腳手架 安裝路由選項（常用）
默認會自動配置相關路由文件
二、單獨安裝路由
就沒有默認文件
npm install(i) vue-router
所有的配置文件要自己去寫
2.3 初始化路由文件
router文件夾 =>index.js
//引入vue核心庫
import Vue from 'vue'
//引入路由文件
import vueRouter from 'vue-router'
//調用路由插件
Vue.use(vueRouter)
//實例化路由的構造函數，得到路由的配置對象
//導出路由的配置對象
//export default 這種方式，整個模塊中只能調用一次！！！
export default new vueRouter({
//routes 路由 路由中肯定回配置大量的路線，不同的路線可以渲染 不同的組件
})
main.js
import Vue from 'vue'
import App from './App.vue'
//引入封裝好的路由文件
//如果你創建文件是index.js你可以直接訪問它的上層目錄就可以了
//如果不是index.js，地址引入就必須具體到某一個文件名
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
刪除默認的app.vue內容
刪除views默認的文件夾以及文件
刪除components中的 HelloWorld.vue文件
2.4基本路由的搭建
router=>index.js
//引入vue核心庫
import Vue from 'vue'
//引入路由文件
import vueRouter from 'vue-router'
//引入要渲染的組件
import Home from '../components/home'
//調用路由插件
Vue.use(vueRouter)
export default new vueRouter({
//routes 路由 路由中肯定回配置大量的路線，不同的路線可以渲染 不同的組件
routes: [
{
path:'/home',//地址
component:Home
}
]
})
app.vue
<template>
<div>
<h1>主組件</h1>
<!-- 路由的視圖 或者 路由的出口 -->
<router-view/>
</div>
</template>
2.5路由的重定向
routes:[
{//路由的重定向，無論輸入什么地址，只要不符合已有path就會被強制跳轉到重定向地址
path:'*',
redirect:'/home'
}
]
2.6路由的視圖
<router-view/>
或者
<router-view></router-view>
2.7路由的導航
<!--
路由導航
to:'要與路由中的path地址一致' 必填屬性
router-link 被瀏覽器解析成為a標簽
默認是a標簽。通過tag可以改變默認標簽 tag='標簽名'
activeClass 內置屬性，可以觸發點擊的樣式
-->
<router-link activeClass='active' tag='span' to='/home'>首頁</router-link>
<router-link activeClass='active' to='/cart'>購物車</router-link>
2.8 嵌套路由
分析邏輯需求，創建組件
router=>index.js
//引入vue核心庫
import Vue from 'vue'
//引入路由文件
import vueRouter from 'vue-router'
//調用路由插件
Vue.use(vueRouter)
//引入一級路由
import Index from '../pages/index.vue'
import Play from '../pages/play.vue'
//二級路由組件
import Home from '../views/home'
import Rank from '../views/rank.vue'
import Search from '../views/search.vue'
export default new vueRouter({
//routes 路由 路由中肯定回配置大量的路線，不同的路線可以渲染 不同的組件
routes: [
{
path:'/index',
component:Index,
//在哪里渲染在哪里嵌套
children:[
//二級路由path地址如果加'/' 訪問地址就是有'/二級path'
//二級路由path地址沒有加'/' 訪問地址就是有'/一級/二級path'
{
path:'/home',
component:Home
},
{
path:'/rank',
component:Rank
},
{
path:'/search',
component:Search
},
{//二級路由重定向
path:'',
redirect:'/home'
}
]
},
{
path:'/play',
component:Play
},
{
path:'*',
redirect:'/index'
}
]
})
app.vue
<template>
<div>
<!--
app.vue中不要寫其他內容除了一級路由出口！！！
因為app的內容會影響所有的組件因為它是根組件
-->
<!-- 一級路由出口 -->
<router-view></router-view>
</div>
</template>
index.vue
<template>
<div>
<div>
<h1>優音樂</h1>
</div>
<!-- 二級路由導航切換 -->
<router-link to="/home">推薦音樂</router-link>
<router-link to="/rank">排行榜</router-link>
<router-link to="/search">搜索</router-link>
<!-- 二級路由出口 -->
<router-view></router-view>
</div>
</template>
2.9編程式導航
-
push()
往歷史記錄中添加一條數據
-
replace()
替換當前的歷史記錄
-
back()
回退
-
go(n)
n是一個整數
-1 上一頁 （經常用的）
0 本頁
1 下一頁
以上方法，底層均是參照原生window.history.api方法
中文：https://developer.mozilla.org/zh-CN/docs/Web/API/Histo
英文：https://developer.mozilla.org/en-US/docs/Web/API/History_API
2.10 路由傳參之動態路由（用的並不多）
注意點：一定會修改路由文件！！！
router=>index.js
{//動態路由
path: "/detail/:變量",
component: Detail,
},
-
通過路由導航跳轉並傳遞參數
ul>
<li class="item" v-for="item in goodslist" :key='item.id'>
<router-link tag="div" :to="'/detail/'+item.id"> 商品名稱：{{item.name}}</router-link>
</li>
</ul>
-
通過編程式導航跳轉並傳遞參數
<ul>
<li @click="goDetail(item.id)" class="item" v-for="item in goodslist" :key="item.id">
商品名稱：{{ item.name }}
</li>
</ul>
邏輯部分：
goDetail(id){
this.$router.push('/detail/'+id)
}
-
取值
this.$route.params.變量
2.11 路由傳參之query參數
注意點：不需要 不需要 不需要 ！！！操作路由文件！！！
-
通過路由導航跳轉並傳遞參數
ul>
<li class="item" v-for="item in goodslist" :key='item.id'>
<router-link tag="div" :to="'/order?變量='+item.id"> 商品名稱：{{item.name}}</router-link>
</li>
</ul>
-
通過編程式導航跳轉並傳遞參數
<ul>
<li @click="goOrder(item.id)" class="item" v-for="item in goodslist" :key="item.id">
商品名稱：{{ item.name }}
</li>
</ul>
邏輯部分：
goOrder(id){
this.$router.push('/order?變量='+id)
this.$router.push({
path:'/order',
query:{
變量:id
}
})
}
-
取值
this.$route.query.變量