vue-router

安装vue-router4

npm install vue-router@4

添加页面 home article

views/home/homeIndex.vue
views/article/articleIndex.vue

路由配置

import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'

const Home = () => import('@/views/home/homeIndex.vue')
const Article = () => import('@/views/article/articleIndex.vue')

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: '',
      keywords: '',
      description: '',
      keepAlive: false
    }
  },
  {
    path: '/article',
    name: 'article',
    component: Article,
    meta: {
      title: '',
      keywords: '',
      description: '',
      keepAlive: false
    }
  }
]

const router = createRouter({
  history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
  routes
})

export default router

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

入口文件

main.js

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'

import 'normalize.css'

export const createApp = () => {
  const app = createSSRApp(App)
  app.use(router)
  return { app, router }
}

entry-client.js

import { createApp } from "./main";

const { app, router } = createApp()

router.isReady().then(() => {
  app.mount('#app')
})

entry-server.js

import { createApp } from "./main"
import { renderToString } from 'vue/server-renderer'

export async function render(url) {
  const { app, router } = createApp()
  await router.push(url)
  await router.isReady()
  const html = renderToString(app)
  return html
}

App.vue 路由跳转

<template>
  <button @click="router.push('/')">home</button> | <button @click="router.push('/article')">article</button>
  <router-view></router-view>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
</script>

<style lang="scss" scoped></style>

axios

安装axios

npm install axios -S

简单封装axios

import axios from 'axios';
import qs from 'qs';


export class Axios {
  constructor() {
    this.axios = axios;
    this.axios.defaults.baseURL = 'http://localhost:3001/vite-ssr/';
    this.axios.defaults.validateStatus = function (status) {
      return status >= 200 && status < 600; // default
    };
    //默认10s的超时时间
    this.axios.defaults.timeout = 10000;
  }
  /**
   * axios请求方法
   */
  apiPost(config) {
    let requestOption = this._requestInterceptor(config);
    return new Promise((resolve, reject) => {
      this.axios.request(requestOption).then(
        async res => {
          let defData = res.data;
          let { data, result, message, msg, code } = defData;
          resolve(defData);
        },
        error => {
          console.log('server error')
          reject(error);
        }
      );
    });
  }

  _requestInterceptor(config) {
    if (config.method === 'post' || config.method === 'put') {
      config.data = qs.stringify(config.params);
    }
    config.params = config.method === 'get' ? config.params : '';
    return config;
  }
}

C++音视频开发学习资料：点击莬费领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

接口引入&使用

api/index.js

export { default as ArticleApi } from './article';

api/article.js

import { Axios } from '@/utils/axios';

class ArticleApi extends Axios {
  getArticleList(params) {
    return this.apiPost({
      url: 'articles/list',
      method: 'get',
      params
    });
  }
}

export default new ArticleApi();

使用

import { ArticleApi } from "@/api";
import { onMounted, ref } from "vue";

const imgList = ref([]);
onMounted(() => {
  getArticles();
});

const getArticles = async () => {
  let res = await ArticleApi.getArticleList();
  imgList.value = res.data;
};

效果预览，使用mockjs模拟数据

如果你对音视频开发感兴趣，或者对本文的一些阐述有自己的看法，可以在下方的留言框，一起探讨。