From 43fa97b7f46b997aca6cb6fb816b075a63d05dd9 Mon Sep 17 00:00:00 2001 From: fxy060608 <153647646@qq.com> Date: Fri, 8 Nov 2024 15:03:01 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E7=BB=9D=E5=AF=B9?= =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=92=8C=E7=9B=B8=E5=AF=B9=E8=B7=AF=E5=BE=84?= =?UTF-8?q?=E4=BB=8B=E7=BB=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/page-path.md | 73 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 docs/tutorial/page-path.md diff --git a/docs/tutorial/page-path.md b/docs/tutorial/page-path.md new file mode 100644 index 000000000..de8e47ce3 --- /dev/null +++ b/docs/tutorial/page-path.md @@ -0,0 +1,73 @@ +### ç»å¯¹è·¯å¾„和相对路径 + +在日常开å‘ä¸ï¼Œç»å¸¸ä¼šé‡åˆ°ä½¿ç”¨ç»å¯¹è·¯å¾„还是相对路径的问题,下é¢æˆ‘们介ç»ä¸‹è¿™ä¸¤ç§è·¯å¾„。 + +#### ç»å¯¹è·¯å¾„ + +ç»å¯¹è·¯å¾„ï¼šæ˜¯æŒ‡ä»Žé¡¹ç›®æ ¹ç›®å½•å¼€å§‹çš„å®Œæ•´è·¯å¾„ã€‚å®ƒç”¨äºŽæŒ‡å®šæ–‡ä»¶æˆ–ç›®å½•çš„ç¡®åˆ‡ä½ç½®ã€‚ç»å¯¹è·¯å¾„通常以斜æ (/ï¼‰å¼€å¤´ï¼Œè¡¨ç¤ºä»Žæ ¹ç›®å½•å¼€å§‹ã€‚ + +例如: + +```vue +<template> + <!-- 图片组件引用ç»å¯¹è·¯å¾„ --> + <image src="/static/logo.png" /> + <!-- 视频组件引用ç»å¯¹è·¯å¾„ --> + <video src="/static/demo.mp4" /> + <!-- 其他需è¦å¼•ç”¨èµ„æºçš„媒体组件å‡å¯ä»¥ä½¿ç”¨ç»å¯¹è·¯å¾„ --> +</template> +<script setup> +// 使用一个图片资æºæ—¶ï¼Œå¯ä»¥ä½¿ç”¨ç»å¯¹è·¯å¾„ +uni.getImageInfo({ + src: "/static/logo.png", +}); +// 跳转页é¢æ—¶ï¼Œå¯ä»¥ä½¿ç”¨ç»å¯¹è·¯å¾„ +uni.navigateTo({ + url: "/pages/login/login", +}); +</script> +``` + +这里的`/static/logo.png`就是一个ç»å¯¹è·¯å¾„,表示图片文件ä½äºŽé¡¹ç›®æ ¹ç›®å½•ä¸‹çš„ static 文件夹ä¸ã€‚ + +ç»å¯¹è·¯å¾„的优点是å¯ä»¥ç›´æŽ¥å®šä½åˆ°æ–‡ä»¶çš„确切ä½ç½®ï¼Œä¸å—当å‰ç›®å½•çš„å½±å“,通常需è¦åŠ¨æ€ä¼ 递的路径,我们建议使用ç»å¯¹è·¯å¾„。 + +**注æ„** + +- 当使用`import`è¯å¥å¯¼å…¥ä»£ç 文件或é™æ€èµ„æºæ—¶ï¼Œ`@/`è¡¨ç¤ºé¡¹ç›®æ ¹ç›®å½•çš„ç»å¯¹è·¯å¾„。如`import { add } from "@/common/utils"` + +#### 相对路径 + +相对路径:在编译时是指一个文件或目录相对于å¦ä¸€ä¸ªæ–‡ä»¶æˆ–目录的ä½ç½®ï¼Œåœ¨è¿è¡Œæ—¶æ˜¯æŒ‡ä¸€ä¸ªæ–‡ä»¶ç›¸å¯¹äºŽå½“å‰é¡µé¢è·¯ç”±çš„ä½ç½®ï¼ˆä¸å»ºè®®ä½¿ç”¨è¿è¡Œæ—¶çš„相对路径,应该优先使用ç»å¯¹è·¯å¾„)。 + +例如: + +组件 components/custom/custom.vue + +```vue +<template> + <!-- 绑定动æ€è·¯å¾„ --> + <image :src="src" /> +</template> +<script setup> +// 编译时:使用 import è¯å¥ç›¸å¯¹è·¯å¾„导入图片 +import logo from "../../static/logo.png"; +console.log(logo); // import è¯å¥ä¼šåœ¨ç¼–è¯‘é˜¶æ®µæ ¹æ®å½“å‰æ–‡ä»¶ä½ç½®è½¬æ¢ä¸ºç»å¯¹è·¯å¾„ + +// è¿è¡Œæ—¶ +// 错误的相对路径用法,image组件会在è¿è¡Œæ—¶æ ¹æ®å½“å‰é¡µé¢è·¯ç”±æ¥è½¬æ¢è¯¥ç›¸å¯¹è·¯å¾„,当ä¸åŒçš„页é¢ä½¿ç”¨custom组件时,转æ¢çš„路径是ä¸åŒçš„ +// 应该使用ç»å¯¹è·¯å¾„:/static/logo.pngï¼Œè¿™æ ·å¯ä»¥ç¡®ä¿åœ¨ä»»æ„页é¢éƒ½è®¿é—®åˆ°æ£ç¡®çš„å›¾ç‰‡åœ°å€ +const src = "../../static/logo.png"; + +uni.navigateTo({ + // è¿è¡Œæ—¶ + // 错误的相对路径用法,路由会在è¿è¡Œæ—¶æ ¹æ®å½“å‰é¡µé¢è·¯ç”±æ¥è½¬æ¢è¯¥ç›¸å¯¹è·¯å¾„ + // 应该使用ç»å¯¹è·¯å¾„:/pages/index/index + url: "../../pages/index/index", +}); +</script> +``` + +**注æ„** + +- 在 uni-app x 项目ä¸ï¼ŒdialogPage ä¸å½±å“页é¢æ ˆå’Œè·¯ç”±åœ°å€ï¼Œæ‰€ä»¥ä¹Ÿä¸ä¼šå½±å“è¿è¡Œæ—¶çš„ç›¸å¯¹è·¯å¾„è½¬æ¢ \ No newline at end of file -- GitLab