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 文件

访问结果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/340083.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python 格式化字符、列表推导式

文章目录 1. 格式化字符串f-string1. 1 简单使用1.2 表达式求值与函数调用1.3 多行f-string1.4 对齐格式1.5 宽度与精度描述符 2. 列表表达式2.1 列表推导式的2种形式2.2 单个for循环语法案例 2.3 双重for循环语法案例 参考 1. 格式化字符串f-string f-string,亦称…

基于SpringBoot+vue的在线视频教育平台的设计与实现,附源码,数据库

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

ubuntu使用docker compose一键部署项目

1、将前面手动部署的容器和镜像全部删除 docker rmi hmall (hmall镜像名) docker rmi image_id rmi 是删除多个 rm是删除一个 2、执行命令 docker compose up -d http://192.168.79.129:18080/search.html 访问安装成功! 该ip是虚拟机ubuntu的ip 3、docker-compos…

Rust 程序设计语言学习——基础语法

Rust 语言是一种高效、可靠的通用高级语言。其高效不仅限于开发效率,它的执行效率也是令人称赞的,是一种少有的兼顾开发效率和执行效率的语言。 Rust 语言由 Mozilla 开发,最早发布于 2014 年 9 月。Rust 的编译器是在 MIT License 和 Apach…

k8s-认证授权 14

Kubernetes的认证授权分为认证(鉴定用户身份)、授权(操作权限许可鉴别)、准入控制(资源对象操作时实现更精细的许可检查)三个阶段。 Authentication(认证) 认证方式现共有8种&…

报考中国人民大学金融硕士项目后,我的人生像开了加速器

或许你一直在寻找一个能够改变你人生的机会,一个能够让你加速实现梦想的平台。如果你对金融领域充满热情,并且渴望在这个领域取得卓越成就,那么中国人民大学金融硕士项目将为你提供一个绝佳的选择。 中国人民大学与加拿大女王大学金融硕士项…

白酒:传统工艺与现代技术的完善结合

云仓酒庄豪迈白酒,是中国的酒文化中的一颗璀璨明珠。它不仅是一种产品,更是一种文化、一种情感的载体。在云仓酒庄豪迈白酒的酿造过程中,传统工艺与现代技术得到了完善的结合,共同诠释了这种美酒的与众不同魅力。 首先&#xff0…

yarn集群datanode无法启动问题排查

一、问题场景 hdfs无法访问,通过jps命令查看进程,发现namenode启动成功,但是所有datanode都没有启动,重启集群(start-dfs.sh)后仍然一样 二、原因分析 先看下启动的日志有无报错。打开Hadoop的日志目录 …

java SSM项目预算生成管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM项目预算生成管理系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的 源代码和数据库,系统主…

PALWORLD linux centos7开服教程

开放端口8211 yum -y install glibc.i686 libstdc.i686 screen libcurl.i686 yum install glibc-devel.i686 yum install libstdc-devel.i686 yum -y install glibc.i686 libstdc.i686 screen libcurl.i686 useradd -m steam su - steam mkdir ~/steamcmd cd ~/steamcmd wg…

【Linux】Linux进程信号(上)

​ ​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:Linux 🎯长路漫漫浩浩,万事皆有期待 上一篇博客:【Linux】…

请你来了解一下Mysql-InnoDB中事务的两段式提交

欢迎订阅专栏,了解更多Mysql的硬核知识点,原创不易,求打赏 ACID:事务的四个特性 A:原子性 原子性表示把一个事务中所有的操作视为一个整体,要么全部成功,要么全部失败,是事务模型区…

基于YOLOv5、v7、v8的竹签计数系统的设计与实现

文章目录 前言效果演示一、实现思路① 算法原理② 程序流程图 二、系统设计与实现三、模型评估与优化① Yolov5② Yolov7③Yolov8 四、模型对比 前言 该系统是一个综合型的应用,基于PyTorch框架的YOLOv5、YOLOv7和YOLOv8,结合了Django后端和Vue3前端&am…

怎样才能实现私域流量的增长?

为了优化私域流量增长,以下策略可能有效: 1. 价值吸引,而非仅仅是免费: 采用免费策略吸引用户是常见做法,但关键在于通过高价值或服务提升用户体验,确保用户在“获取”免费产品过程中感受到真正的价值。 …

CocoaPods的安装和使用

前言 本篇文章讲述CocoaPods的安装和使用 安装cocoaPods 如果电脑没有安装过cocoaPods,需要先安装,使用下面的命令: sudo gem install cocoapods输入密码后开始安装,需要等待。。。但是我这里报错了。 The last version of d…

17.JVM-[一篇通]

文章目录 JVM1.JVM 简介 (一个进程有一个JVM)1.1JVM 发展史1.2 JVM 和《Java虚拟机规范》 2.JVM 运行流程2.1JVM 执行流程 3.JVM 运行时数据区3.1 堆(线程共享 一个进程只有一份堆)3.2Java虚拟机栈(线程私有 每个线程都有一份属于自己的栈&am…

rancher和k8s接口地址

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux/Windows/Mac 机器上。容器镜像正成为一个新的标准化软件交付方式。为了能够获取到 Docker 容器的运行状态,用户可以…

某瓜数据app 获取达人直播商品信息接口 Sign

文章目录 声明指定直播间获取商品信息达人主页所有的商品列表接口声明 本文章中所有内容仅供学习交流,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请私信我立即删除! 之前写过:某瓜数据app Sign 具体算法分析请看上一篇,这次看一下不同…

大语言模型质量评测(附带全部可运行代码)

代码仓库 大模型训练完之后,怎么知道其回答质量好不好,或者是不是可用的,这就需要我们对大模型进行评测,评测集的制定显得尤为重要。 收集相关数据,我们可以对评测集分为主观题和客观题,这些题目尽可能的包…

I2C接口简介

一、简介 11I2C(Inter-IntegratedCircuit)总线是由PHILIPS公司开发的两线式串行通信总线,使用多主从架构,用于连接微控制器及其外围低速设备。是微电子通信控制领域广泛采用的一种总线标准。它是同步通信的一种特殊形…