home
  • Blog
1.11
  • Getting Started
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
    • Introduction
    • Defining Your Routes
    • Generated Objects
    • Specifying a Route's Model
    • Setting Up a Controller
    • Rendering a Template
    • Redirecting
    • Specifying the URL Type
    • Query Parameters
    • Asynchronous Routing
    • Loading / Error Substates
    • Preventing and Retrying Transitions
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.11.0.
Go to v5.0.0

Specifying the URL Type

Edit pencil

By default the Router uses the browser's hash to load the starting state of your application and will keep it in sync as you move around. At present, this relies on a hashchange event existing in the browser.

Given the following router, entering /#/posts/new will take you to the posts.new route.

// app/router.js
Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

If you want /posts/new to work instead, you can tell the Router to use the browser's history API.

Keep in mind that your server must serve the Ember app from all the URLs defined in your Router.map function.

app/router.js
Ember.Router.extend({
  location: 'history'
});

Finally, if you don't want the browser's URL to interact with your application at all, you can disable the location API entirely. This is useful for testing, or when you need to manage state with your Router, but temporarily don't want it to muck with the URL (for example when you embed your application in a larger page).

app/router.js
Ember.Router.extend({
  location: 'none'
});
left arrow
Redirecting
Query Parameters
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue