vue笔记第六天
一、作用域插槽
子组件上有数据，html代码结构由父组件来提供
脚手架中v-for和v-if不建议混在一起用，所以这里用了template标签
v-slot:插槽名称="形参"
形参用来获取子组件传递过来的数据
二、路由
1.介绍
Vue Router 是 Vue官方的路由管理器。
它和 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
$route是当前路由规则的详情信息第三步：引入需要使用的页面组件
```
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.路由导航
### (1)内置组件
<router-link></router-link>
它会生成一个a标签，需要添加一个to属性，属性值是path属性的内容
非必要属性active-class，设置激活状态的类名
active-class 模糊匹配
exact-active-class 精确匹配
```
<router-link to="/index" active-class="active">首页</router-link>
<router-link to="/order" active-class="active">订单</router-link>
```
### (2)编程式导航
$router
push 把已访问的路由规则添加到历史记录中，并跳转页面
replace 把指定的路由规则替换到已访问的历史记录中，并跳转页面
go(-1) 回退
【/index，/order】 push ->order
【/index，/music】 replace ->music
## 5.路由重定向
```
{ path:'*',redirect:'/重定向目标路由规则' }
```
星号是通配符，表示没有匹配到任何一个路由规则
redirect属性的内容是path属性的属性值，只有加上了redirect属性，当访问一个不存在的路由规则时，浏览器地址重新定向到指定的路由规则地址上。
## 6.路由嵌套
(1)创建几个页面组件
(2)在原有的一级路由规则上添加一个children属性，作为它的子级路由规则
```js
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' }
]
})
```
(3)在一级路由规则对应的页面组件中要有路由出口
```
<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插件
```js
<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>
```
路由模式
hash，默认模式，在浏览器地址中有#，#号后面的内容会被解析成路由规则，当路由规则变化时，不会重新发起网络请求
history，在浏览器地址中没有#，利用html5中的historyApi进行页面跳转。打包的项目，部署上线时，需要后端配置web服务器的转发规则，不然会出现404。
路由命名
在定义路由规则时，可以给指定的路由规则设置一个name属性
{
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>
路由别名
alias
{
path:'/login',
component:Login,
alias:'/denglu'
}
别名设置好之后，原来的路由规则和别名都可以访问，便于seo优化。
浙公网安备 33010602011771号