VitePress-02-基于文件的路由介绍以及路由基本使用

说明

本文主要介绍一下内容：
1、【项目中的md文件】与 【页面访问路由】之间的关系
2、md文件中创建路由的基本语法

文件与路由的映射关系

VitePress使用的是基于文件的路由。
什么意思呢？
就是，【浏览器中访问页面的地址】 和 【项目文件的目录结构】是一致的。

案例分析

目录结构如下：
 projectName
  	| -- .vitepress      # 项目的配置目录
   	| -- node_mocules    # 项目的安装的依赖目录
 	| -- index.md        # 项目的首页文件
 	| -- helloworld.md   # 项目的普通文件
  	| -- srca 
  		| -- a.md        # 有嵌套目录的普通文件
  		|-- b.md.        # 有嵌套目录的普通文件
  	| -- package.json    # 项目以来以及项目配置文件

项目映射完成之后，文件和页面的映射关系如下：
 index.md        --->   /index.html
 helloworld.md   --->   /helloworld.html
 srca/a.md       --->   /srca/a.html
 srca/b.md.      --->   /srca.b.html

案例展示

访问 helloworld.md

访问 srca/a.md

访问 srca/b.md

手动写链接的基本语法

上面访问页面的方式是直接在浏览器中输入地址进行访问；
在项目中的md文件中也可以通过链接的方式进行页面的跳转与访问。

链接的使用有两种情景 ：
1、跳转到项目内部的页面，可以直接使用【相对路径的方式】；
2、跳转到外部的页面，比如，百度的页面；

链接内部页面的语法：[展示的链接文案](实际的链接地址)

  注意 ： 链接内部页面的时候，建议使用相对路径的方式，而且只写到文件名即可，不需要写后缀

链接外部页面的语法：[展示的链接文案](实际的链接地址){target="_self"}

注意 ：链接外部页面的时候，一般情况下需要使用绝对路径，要不然是找不到的。

案例文件项目结构

 projectName
  	| -- .vitepress      # 项目的配置目录
   	| -- node_mocules    # 项目的安装的依赖目录
 	| -- index.md        # 项目的首页文件
 	| -- helloworld.md   # 项目的普通文件 : 包含链接的地方
  	| -- srca 
  		| -- a.md        # 有嵌套目录的普通文件
  	| -- package.json    # 项目以来以及项目配置文件

helloworld.md 文件的内容

# 体会路由的基本使用
> hello world for router in vitepress

# 这是 helloworld.md 文件
这是根目录的 helloworld.md 文件 

## 基本跳转 - 跳转项目内的文档
> 语法规则 ： `[页面上要展示的文字](实际文档的相对路径)`

> 注意事项 ： 在写相对路径的时候，只写到文件名即可，不需要写文件的后缀！


[跳转到a.md](./srca/a)
## 特殊跳转 - 跳转到外部的页面
> 语法规则 ： `[页面上要展示的文字](具体的路径){指定在新的选项卡中打开}`

> 注意事项 ：此时的具体路径需要写绝对路径，完整的路径


[跳转到百度](https://www.baidu.com){target="_self"}

srca/a.md 文件的内容

# 这是 a.md 文件
恭喜你，成功的完成了基本路由的跳转
这是 srca/a.md 文件

访问结果

至此，文件的访问以及基本跳转的功能就完成了。