tabbar 案例

准备

创建6个组件
引入 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 复用组件

在一个项目当中引入路由系统

一共四步, 写在 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);

vue（7）