Vue07
tabbar 案例
准备
- 创建6个组件
- 在main.js里引入 bootstrap 和 字体图标
- 在 app.vue 使用头部的组件
底部
-
app.vue 准备数组
-
传入底部tabbar
-
底部进行遍历显示即可
-
点击时需要记录 index 高亮
组件切换
-
app.vue 放一个 component 动态组件
-
底部点击按钮时, 往外传出 当前名字(遍历tabList得出来的)
商品数据
-
发送请求获取商品列表数据
- 引入aixos
- 封装基准路径
-
渲染在表格中
- 表格组件的拆分
- 父传子传入列表
- 子组件进行遍历
作用域组件封装
-
子组件本来显示表头和内容的部分用 slot 替换, 命名
-
父组件使用子组件 MyTable 的时候 就可以传入标签决定子组件列显示方式
-
由于遍历是在子组件进行, 父组件渲染列的时候 没有 item 没有 Index 用作用于插槽, 回传给父组件
路由
什么叫路由
其实是标记到资源的映射关系, 在前端vue 项目中, url 路径 和组件的映射关系
为什么用到路由
vue 都是单页面应用, 所有内容都是在同一个页面中实现
靠路由实现页面的跳转, 没有真正 html 跳转
组件的两种分类
本质上没有不一样, 方便使用一般放在两个文件夹内
/src/views (pages) 页面组件 页面展示、 配合路由使用
/src/components 复用组件 展示数据、常用语复用
总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据
在一个项目当中引入路由系统
安装：
npm i vue-router@3
一共四步, 写在 main.js 里面
// 1. 引入库
import VueRouter from 'vue-router'
// 2.在 Vue 安装这个库
Vue.use(VueRouter)
// 3. 创建一个实例
const router = new VueRouter({
// 这里可以有配置对象
})
// 全局注册指令
// Vue.directive(指令名字符串,配置对象)
new Vue({
// 4. 挂载到 new Vue 根实例上
router,
render: h => h(App),
}).$mount('#app')
基本使用方式
路由配置
// 1 引入组件对象 2 指定对应路径
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
const routes = [
{
// 1. path 路径 / 开头
path: '/find',
// 2. component 组件
component: Find
},
{
path: '/my',
component: My
}
]
// 3.2 创建路由实例, 放入配置表
const router = new VueRouter({
// 这里可以有配置对象
// 有个属性叫routes是路由配置表,指定 url=>组件的配对
routes
})
挂载点
<template>
<div>
<!-- 路由第三方库给我们提供了两个组件, router-view router-link -->
<!-- router-view 是路由的挂载点, 指定需要显示路由组件的地方 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
点亮
使用 router-link 跳转即可, 自带类名, 写 css 即可
传参的方式
两种传递方式
<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my?name=小明">我的音乐</router-link>
<router-link to="/part/666789">朋友</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>
两种接收方式
重定向和模式
重定向 写在 routes 路由配置数组中
{
// 每当用户访问根路径 / 的时候, 自动跳转到 /find
path: '/',
redirect: '/find'
},
404 页面解决方案
{
path: '*',
component: Page404
}
路由模式, 去除 # 号 优点是好看
// 3.2 创建路由实例, 放入配置表
const router = new VueRouter({
// 这里可以有配置对象
// 有个属性叫routes是路由配置表,指定 url=>组件的配对
routes,
// 修改路由拼接模式, history 减少一个井号,优点好看一些
mode: 'history'
})
编程时导航
基本使用
export default {
methods: {
handleClick() {
console.log('点击了有个按钮');
// 方式1, 直接 path 作为字符串传入
// this.$router.push('/my')
// 方式2 传入一个对象, 其中带有 path 属性
// this.$router.push({
// path: '/my'
// })
// 方式3 传入一个对象, 其中带有 name 属性, 需要在路由中预先配置
this.$router.push({
name: 'MyPage'
})
}
}
}
可以传参
handleClick() {
console.log('点击了有个按钮');
// 方式1, 直接 path 作为字符串传入
// this.$router.push('/my')
// 方式2 传入一个对象, 其中带有 path 属性
// this.$router.push({
// path: '/my'
// })
// 方式3 传入一个对象, 其中带有 name 属性, 需要在路由中预先配置
this.$router.push({
// 需要 params 传参的话
// path 跟 params 两个属性会冲突
// path: 'part/8888',
name: 'partPage',
params:{
id: 66666
}
})
}
}
嵌套路由
路由配置嵌套
// routes 配置中添加
{
// 1. path 路径 / 开头
path: '/find',
// 2. component 组件
component: Find,
redirect: '/find/ranking',
// 嵌套子路由
children: [
// 依旧是 path 跟 component 的配对
// 不要加斜杠, 因为需要改上一层拼接在一起
// 如果加了, 就需要在根路径进行访问
{
path: 'ranking',
component: Ranking
},
{
path: 'recommend',
component: Recommend
},
{
path: 'songlist',
component: SongList
},
]
},
页面挂载点嵌套
在需要显示children 的页面中添加二级挂载点 这里是 /views/Find.vue
<template>
<div>
<router-link class="myLink" to="/find/ranking">排行榜</router-link>
<router-link class="myLink" to="/find/songlist">歌单</router-link>
<router-link class="myLink" to="/find/recommend">推荐</router-link>
<!-- 显示二级路由组件需要一个挂载点 -->
<router-view></router-view>
</div>
</template>
导航守卫
// router 创建实例之后
// 可以往这个 router 路由实例添加导航守卫(路由守卫)
// 全局前置, 所有页面跳转之前都会经过
router.beforeEach((to, from, next)=>{
console.log('到达了导航守卫');
// 拦住了必须放行, 默认这个函数可以接收到三个参数
// to 目的地, from 来源, next 放行回调函数
console.log(to);
console.log(from);
// 如果你来到了我的音乐但是有没有token就要跳转到登录页
if (to.path === '/my' && !localStorage.getItem('token')) {
// 这个 next 可以再里面带上 path 进行跳转
next('/login')
}else {
next()
}
})
vant 组件库
引入全部组件
安装好npm i vant@2 之后再 main.js 引入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
手动按需引入
import { Button } from 'vant';
import 'vant/lib/button/style';
Vue.use(Button);
