# Js-Router-Demo

**Repository Path**: ailjx/js-router-demo

## Basic Information

- **Project Name**: Js-Router-Demo
- **Description**: 原生js路由实现简单demo，解决js，css引入问题
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-08-02
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: AiLjx
 * @Date: 2022-08-03 12:05:05
 * @LastEditors: AiLjx
 * @LastEditTime: 2022-08-03 13:42:21
-->

<h1 align="center">Js Router Demo</h1>
<br>

## 介绍

使用原生`JavaScript`实现`hash`模式路由的一个小`demo`，解决路由页面 `js` 文件和 `css` 文件引入问题，简单实现 `api` 请求封装使用

接口来源：[网易云音乐接口](https://github.com/Binaryify/NeteaseCloudMusicApi)

路由核心代码 `hashRouter.js` 参考自：[spa-routers](https://github.com/kliuj/spa-routers)

## 功能

-   支持异步加载路由 `js` 文件：使用 `module` 模块化异步加载，支持 `ES6` 导入导出，并支持加载多个 `js` 文件

-   支持同步加载路由页面函数

-   支持加载多个路由页面 `css`

-   `demo` 演示了 `api` 请求封装以及 `ES6` 模块的使用

-   `html` 使用 `include.js` 实现组件化开发

## 结构

```
Js Router Demo
├── .vscode             // vscode配置文件
├── components          // 公共组件
├── css                 // 全局css文件
├── js                  // 全局js文件
├── pages               // 页面文件
├── router              // 路由文件
│   ├── hashRouter.js   // 路由处理文件
│   ├── index.js        // 路由配置（使用）文件
├── api.js              // api请求封装文件
├── index.html          // 入口页面
└── README.md

```

## 本地运行

-   `vscode`打开项目
-   `vscode`安装`Live Server`插件
-   将`router/index.js`中的`giteePagesPath`设置为`''`空
-   右键根目录下的入口文件 `index.html`，选择 `Open with Live Server` 运行
-   运行自动打开页面后，若地址栏里有 `index.html`字符：`http://127.0.0.1:5501/index.html#/`，可将其删除:`http://127.0.0.1:5501/#/`
-   直接访问`http://127.0.0.1:5501`也可查看运行后的`demo`(运行端口号可在`.vscode/settings.json`中进行修改 )

## Gitee Pages 部署

-   将`router/index.js`中的`giteePagesPath`设置为你的 `Gitee Pages` 路径

    > 如我的 `Gitee Pages`为： http://ailjx.gitee.io/js-router-demo ，那么我将`giteePagesPath`设置为 `/js-router-demo` 即可

## 问题

运行时若报`CORS`跨域问题(如下所示)，是因为网页有缓存，尝试**清除网页缓存强制刷新**几次就能解决

> Access to XMLHttpRequest at 'https://netease-cloud-music-api.vercel.app/mv/all' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://ailjx.gitee.io' that is not equal to the supplied origin.