渲染列表 (一) -渲染频道-手动安装npm i vue-router@3.0.7 & 新建api函数-提供频道相关接口操作函数 & 判断是否登录—— 头部是否有token

渲染频道-手动安装npm i vue-router@3.0.7 & 新建api函数-提供频道相关接口操作函数 & 判断是否登录—— 头部是否有token

vue-cli安装的默认vue-router的是3.0.3版本，点击我的界面控制台会报错存在问题 (可在package.json中查看版本)

需手动安装指定版本

npm i vue-router@3.0.7

第一步：新建api函数 src/api/channel.js 提供频道 相关接口操作函数

/**
 * 获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）
 * 在请求拦截器加上了token  判断是否登录—— 头部是否有token
 */

import request from '@/utils/request'

export const getMyChannels = () => {
  return request('app/v1_0/user/channels', 'get')
}

第二步：导入函数 src/vies/home/index.vue中的script里

import { getMyChannels } from '@/api/channel'

第三步：使用函数 ： src/vies/home/index.vue中的methods里

    // 获取数据
  created () {
      //当你频道加载完毕，文章列表会自动进行加载
      // 默认的第一个频道 是推荐频道 索引一定是0
    this.getMyChannels()
      //代码调用  文章列表数据  默认是推荐频道的数据
     //默认tab中  van-list组件  默认执行一次onload
  },
    async getMyChannels () {
      const data = await getMyChannels()
      this.channels = data.channels
    }
  }

申明数据 src/vies/home/index.vue

 // ----频道需要的数据----
 channels: [],

渲染组件 src/vies/home/index.vue中的div盒子里

//遍历频道列表
<van-tab :key="item.id" v-for="item in channels" :title="item.name">