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.变量