|
| 1 | +# Routing |
| 2 | + |
| 3 | +VitePress is built with file system based routing, which means the directory structure of the source file corresponds to the final URL. You may customize the mapping of the directory structure and URL too. Read through this page to learn everything about the VitePress routing system. |
| 4 | + |
| 5 | +## Basic Routing |
| 6 | + |
| 7 | +By default, VitePress assumes your page files are stored in project root. Here you may add markdown files with the name being the URL path. For example, when you have following directory structure: |
| 8 | + |
| 9 | +``` |
| 10 | +. |
| 11 | +├─ guide |
| 12 | +│ ├─ getting-started.md |
| 13 | +│ └─ index.md |
| 14 | +├─ index.md |
| 15 | +└─ prologue.md |
| 16 | +``` |
| 17 | + |
| 18 | +Then you can access the pages by the below URL. |
| 19 | + |
| 20 | +``` |
| 21 | +index.md -> / |
| 22 | +prologue.md -> /prologue.html |
| 23 | +guide/index.md -> /guide/ |
| 24 | +getting-started.md -> /guide/getting-started.html |
| 25 | +``` |
| 26 | + |
| 27 | +As you can see, the directory structure corresponds to the final URL, as same as hosting plain HTML from a typical web server. |
| 28 | + |
| 29 | +## Changing the Root Directory |
| 30 | + |
| 31 | +To change the root directory for your page files, you may pass the directory name to the `vitepress` command. For example, if you want to store your page files under `docs` directory, then you should run `vitepress dev docs` command. |
| 32 | + |
| 33 | +``` |
| 34 | +. |
| 35 | +├─ docs |
| 36 | +│ ├─ getting-started.md |
| 37 | +│ └─ index.md |
| 38 | +└─ ... |
| 39 | +``` |
| 40 | + |
| 41 | +``` |
| 42 | +vitepress dev docs |
| 43 | +``` |
| 44 | + |
| 45 | +This is going to map the URL as follows. |
| 46 | + |
| 47 | +``` |
| 48 | +docs/index.md -> / |
| 49 | +docs/getting-started.md -> /getting-started.html |
| 50 | +``` |
| 51 | + |
| 52 | +You may also customize the root directory in config file via [`srcDir`](/config/app-configs#srcdir) option too. Running `vitepress dev` with the following setting acts same as running `vitepress dev docs` command. |
| 53 | + |
| 54 | +```ts |
| 55 | +export default { |
| 56 | + srcDir: './docs' |
| 57 | +} |
| 58 | +``` |
| 59 | + |
| 60 | +## Linking Between Pages |
| 61 | + |
| 62 | +When adding links in pages, omit extension from the path and use either absolute path from the root, or relative path from the page. VitePress will handle the extension according to your configuration setup. |
| 63 | + |
| 64 | +```md |
| 65 | +<!-- Do --> |
| 66 | +[Getting Started](/guide/getting-started) |
| 67 | +[Getting Started](../guide/getting-started) |
| 68 | + |
| 69 | +<!-- Don't --> |
| 70 | +[Getting Started](/guide/getting-started.md) |
| 71 | +[Getting Started](/guide/getting-started.html) |
| 72 | +``` |
| 73 | + |
| 74 | +Learn more about page links and links to assets, such as link to images, at [Asset Handling](asset-handling). |
| 75 | + |
| 76 | +## Generate Clean URL |
| 77 | + |
| 78 | +A "Clean URL" is commonly known as URL without `.html` extension, for example, `example.com/path` instead of `example.com/path.html`. |
| 79 | + |
| 80 | +By default, VitePress generates the final static page files by adding `.html` extension to each file. If you would like to have clean URL, you may structure your directory by only using `index.html` file. |
| 81 | + |
| 82 | +``` |
| 83 | +. |
| 84 | +├─ getting-started |
| 85 | +│ └─ index.md |
| 86 | +├─ installation |
| 87 | +│ └─ index.md |
| 88 | +└─ index.md |
| 89 | +``` |
| 90 | + |
| 91 | +However, you may also generate a clean URL by setting up [`cleanUrls`](/config/app-configs#cleanurls-experimental) option. |
| 92 | + |
| 93 | +```ts |
| 94 | +export default { |
| 95 | + cleanUrls: 'with-subfolders' |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +This option has several modes you can choose. Here is the list of all modes available. The default behavior is `disabled` mode. |
| 100 | + |
| 101 | +| Mode | Page | Generated Page | URL | |
| 102 | +| :--------------------- | :-------- | :---------------- | :---------- | |
| 103 | +| `'disabled'` | `/foo.md` | `/foo.html` | `/foo.html` | |
| 104 | +| `'without-subfolders'` | `/foo.md` | `/foo.html` | `/foo` | |
| 105 | +| `'with-subfolders'` | `/foo.md` | `/foo/index.html` | `/foo` | |
| 106 | + |
| 107 | +::: warning |
| 108 | +Enabling this may require additional configuration on your hosting platform. For it to work, your server must serve the generated page on requesting the URL **without a redirect**. |
| 109 | +::: |
| 110 | + |
| 111 | +## Customize the Mappings |
| 112 | + |
| 113 | +You may customize the mapping between directory structure and URL. It's useful when you have complex document structure. For example, let's say you have several packages and would like to place documentations along with the source files like this. |
| 114 | + |
| 115 | +``` |
| 116 | +. |
| 117 | +├─ packages |
| 118 | +│ ├─ pkg-a |
| 119 | +│ │ └─ src |
| 120 | +│ │ ├─ pkg-a-code.ts |
| 121 | +│ │ └─ pkg-a-code.md |
| 122 | +│ └─ pkg-b |
| 123 | +│ └─ src |
| 124 | +│ ├─ pkg-b-code.ts |
| 125 | +│ └─ pkg-b-code.md |
| 126 | +``` |
| 127 | + |
| 128 | +And you want the VitePress pages to be generated as follows. |
| 129 | + |
| 130 | +``` |
| 131 | +packages/pkg-a/src/pkg-a-code.md -> /pkg-a/pkg-a-code.md |
| 132 | +packages/pkg-b/src/pkg-b-code.md -> /pkg-b/pkg-b-code.md |
| 133 | +``` |
| 134 | + |
| 135 | +You may configure the mapping via [`rewrites`](/config/app-configs#rewrites) option like this. |
| 136 | + |
| 137 | +```ts |
| 138 | +export default { |
| 139 | + rewrites: { |
| 140 | + 'packages/pkg-a/src/pkg-a-code.md': 'pkg-a/pkg-a-code', |
| 141 | + 'packages/pkg-b/src/pkg-b-code.md': 'pkg-b/pkg-b-code' |
| 142 | + } |
| 143 | +} |
| 144 | +``` |
| 145 | + |
| 146 | +The `rewrites` option can also have dynamic route parameters. In this example, we have fixed path `packages` and `src` which stays the same on all pages, and it might be verbose to have to list all pages in your config as you add pages. You may configure the above mapping as below and get the same result. |
| 147 | + |
| 148 | +```ts |
| 149 | +export default { |
| 150 | + rewrites: { |
| 151 | + 'packages/:pkg/src/:page': ':pkg/:page' |
| 152 | + } |
| 153 | +} |
| 154 | +``` |
| 155 | + |
| 156 | +Route parameters are prefixed by `:` (e.g. `:pkg`). The name of the parameter is just a placeholder and can be anything. |
| 157 | + |
| 158 | +In addition, you may add `*` at the end of the parameter to map all sub directories from there on. |
| 159 | + |
| 160 | +```ts |
| 161 | +export default { |
| 162 | + rewrites: { |
| 163 | + 'packages/:pkg/src/:page*': ':pkg/:page*' |
| 164 | + } |
| 165 | +} |
| 166 | +``` |
| 167 | + |
| 168 | +The above will create mapping as below. |
| 169 | + |
| 170 | +``` |
| 171 | +packages/pkg-a/src/pkg-a-code.md -> /pkg-a/pkg-a-code |
| 172 | +packages/pkg-b/src/folder/file.md -> /pkg-b/folder/file |
| 173 | +``` |
| 174 | + |
| 175 | +::: warning You need server restart on page addition |
| 176 | +At the moment, VitePress doesn't detect page additions to the mapped directory. You need to restart your server when adding or removing files from the directory during the dev mode. Updating the already existing files gets updated as usual. |
| 177 | +::: |
| 178 | + |
| 179 | +### Relative Link Handling in Page |
| 180 | + |
| 181 | +Note that when enabling rewrites, **relative links in the markdown are resolved relative to the final path**. For example, in order to create relative link from `packages/pkg-a/src/pkg-a-code.md` to `packages/pkg-b/src/pkg-b-code.md`, you should define link as below. |
| 182 | + |
| 183 | +```md |
| 184 | +[Link to PKG B](../pkg-b/pkg-b-code) |
| 185 | +``` |
0 commit comments