vue-router

安装vue-router4

npm install vue-router@4

添加页面 home article

views/home/homeIndex.vueviews/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模拟数据

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