switch·Esc back

URL

You might say

What's that long string in the address bar? I want every page to have its own permanent address.

Describe the exact location of a resource on the webA URL contains pieces such as protocol, domain, path, query, and fragment. Together they identify a page or resource and may carry filters or an anchor. Keep public URLs readable and stable, and never place passwords or secrets in them.
Know first
https://vibeui.dev/components/button?tab=demo#anatomy
ProtocolDomain namePathParametersAnchor

When to use it

  • Open a specific page
    https://vibe-ui.dev/x/8fk2Copy
    Copied
  • Represent a stable resource path
  • Carry non-secret search or filter parameters
  • Jump to a section with a fragment

When NOT to use it

  • Put passwords, tokens, or personal secrets in the URL
  • Change public paths without redirects
  • Use an unreadable path when a clear one is possible
  • Treat query parameters as trusted data
Anatomy
https://vibeui.dev/components/button?tab=demo#anatomy
https:// identifies the protocol used to access the resource; see https.
The domain identifies the host, and dns resolves it to an IP address.
The path identifies a resource on that host; /components/button points to one page.
The query string starts with ? and sends key=value parameters; & separates multiple parameters.
The fragment starts with # and points to a location on the page. The browser handles it without sending it to the server.
Variants
Absolute URL
https://vibeui.dev/components/button
Contains protocol and domain name, suitable for external sharing or cross-site reference
Relative Path
/components/button
Jump within the site, no need to change domain name
Anchor Link
#anatomy
Only locate a section of the current page
Typical use cases
Page address
🔒 https://vibeui.dev/components/button
Buttons and basic styles
Button
Leave the most important action on the page to the button
Search results
🔍 Button
vibeui.dev/search?q=Button&cat=General
3 related entries found
Button
Submit the form, trigger actions, confirm dangerous operations...
Switch
Switch with immediate effect...
Shared filter
Share this entry
https://vibeui.dev/components/button#anatomy
✓ Copied to clipboard
Section link
Directory of this page
When to use
Scene
Composition structure
Variation
/components/button#anatomy
Composition structure · Anatomy
Further reading