说明
本文主要介绍一下内容:
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 文件
访问结果
至此,文件的访问以及基本跳转的功能就完成了。