# vue3.0-todolist

**Repository Path**: bzsometest/vue3.0-todolist

## Basic Information

- **Project Name**: vue3.0-todolist
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-13
- **Last Updated**: 2025-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# init3.0-todolist

参照教程 https://www.imooc.com/learn/1300

## 关于路由模式

- hash模式 createWebHashHistory
    
    - 页面路径示例：index.html#/path
    
    - 原理：识别hash地址
    
- history模式 createWebHistory

    - 页面路径示例：/path
    - 原理：通过重新地址访问的文件依然时index.html
    - vue读取访问的url地，从而获得路由地址
    - 虽然访问的是index.html文件，但必须保证页面路径与路由地址相映射

## history模式nginx配置

- 将前端文件部署在`test`子目录中（也可以直接部署在根目录）
- 创建路由时，指定baseUrl为`test` ：createWebHistory(baseUrl)
- 如果不指定baseUrl，vue将路由地址识别为/test/path

```nginx
location ^~ /test {
    alias  /www/html/test;
    try_files $uri $uri/ index.html;  #重新访问路径，如访问/test/detail时，依然返回index.html文件
    index  index.html index.htm;
    autoindex on;
}
```