Routing

Haven supports client-side routing for navigating between category views and product/event detail without full page reloads.

Routing options

routing: {
  path: '/directory/',
  singlePath: '',
  type: 'hash',
  titleSep: ' | ',
  doPathChange: true,
  hashDocument: null,
}

Option	Type	Default	Description
path	string	/	Base route path for this embed
singlePath	string	''	Segment before product nicename (e.g. item)
type	string	''	hash or path (empty disables routing type)
titleSep	string	-	Document title separator
doPathChange	boolean	false	Enable router onChange handler
hashDocument	string	null	Embed hash routing on a different page path

Hash routing

URLs use hash fragments:

https://yoursite.com/directory/#/category-name/product-name

Configuration:

routing: {
  path: '/directory/',
  type: 'hash',
  doPathChange: true,
}

Advantages: No server configuration required. Works on any static host.

Considerations: Hash URLs are less SEO-friendly and may look less clean in the address bar.

Embed hash routing on another page

When the directory lives on a page with a different URL path, set hashDocument:

routing: {
  path: '/directory/',
  type: 'hash',
  doPathChange: false,
  hashDocument: '/directory/',
}

This is useful for itinerary sidebars embedded on a homepage.

Path routing

URLs use clean paths:

https://yoursite.com/directory2/category-name/product-name

Configuration:

routing: {
  path: '/directory2/',
  type: 'path',
  doPathChange: true,
}

Advantages: Clean, shareable URLs. Better for SEO.

Requirements: Server rewrite rules to route all requests to your app shell (index.html).

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /directory2/

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule ^ index.html [L]
</IfModule>

DirectoryIndex index.html

See Path Routing example.

Nginx

location /directory2/ {
  try_files $uri $uri/ /directory2/index.html;
}

Disabling routing

For widgets that should not change the URL:

routing: {
  path: '/directory/',
  type: 'hash',
  doPathChange: false,
}

Document title

Haven updates document.title as users navigate. The format is:

Product Name | Category Name | Your Page Title

Control the separator with titleSep.

Choosing a strategy

Scenario	Recommended
CMS iframe embed	Hash routing
Standalone SPA page	Path routing
Sidebar widget on homepage	Hash with doPathChange: false
Upcoming events widget	Routing optional (minimal navigation)