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

VitePress-02-基于文件的路由介绍以及路由基本使用_第1张图片

访问 srca/a.md

VitePress-02-基于文件的路由介绍以及路由基本使用_第2张图片

访问 srca/b.md

VitePress-02-基于文件的路由介绍以及路由基本使用_第3张图片

手动写链接的基本语法

上面访问页面的方式是直接在浏览器中输入地址进行访问;
在项目中的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 文件

访问结果

VitePress-02-基于文件的路由介绍以及路由基本使用_第4张图片

VitePress-02-基于文件的路由介绍以及路由基本使用_第5张图片

VitePress-02-基于文件的路由介绍以及路由基本使用_第6张图片

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

你可能感兴趣的:(VitePress,VitePress,文件路由)