Develop Reference

Next.js - On Shallow routing for dynamic path it is removing the basePath from browser url

i have a dynamic routes:
Pages
- [name]
- [brandid]
the browser url should base [basePath]/[name]/[brandid]. After doing shallow routing
router.push("?page=2", undefined, { shallow: true });
the url removes the basePath. And only shows /[name]/[brandid]

When you have dynamic routing in Next.js, and want to do a shallow adjustment of the route to reflect updated query params, you probably want to do something like this:
const router = useRouter()
const url = {
pathname: router.pathname,
query: { ...router.query, page: 2 }
}
router.push(url, undefined, { shallow: true })
This will retreive the current path (router.pathname) and query (router.query) details, and merge them in along with your new page query param. If your forget to merge in the existing query params you might see an error like:
The provided href value is missing query values to be interpolated
properly

Get parameter from URL in Vue JS

I am working on SPA (Vue JS) and Laravel as API. I want when users will receive email to click on button that will sent them to specific route (already implemented).
So now i am struggling how to get the user id from the Vue JS part.
https://domain.test/admin/users/dashboard/user/65/show
65 from the URL is the user ID, so any idea how to extract that ID with java script from Vue JS?
I am not using vue router, this is Laravel route and Vue JS component is rendered from blade file.
I have implemented something like this bellow, but client refused...
https://domain.test/admin/users/dashboard/user/show?userId=65

let id = window.location.href.split('/').slice(-2)[0]

Since you're already rendering the page in a Blade file, you should already have access to the user ID server side.
In that case, simply add the variable server side. For example:
<a :href="'https://domain.test/admin/users/dashboard/user/' + {{
$user->id }} + '/show'">Go to Dashboard</a>

To get parmeters from url you can use vue router for that like this:
const routes = [
// dynamic segments start with a colon
{ path: '/users/:id', component: User },
]
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}
Here is the link for more examples and vue router documentation:
https://router.vuejs.org/guide/essentials/dynamic-matching.html
You can also get parameters with only vanilla JavaScripe like follow:
const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m
//then you have to parse the url
const urlParams = new URLSearchParams(queryString);
const color = urlParams.get('color')
console.log(color);
// blue

Ember.js dynamic route segment with a hash sign with locationType: "hash"

I'm building an Ember application that takes path to other document as a route dynamic segment parameter. The document is further displayed in iframe inside my app. I'm using a locationType: hash option in environment and a wildcard route as in this answer: https://stackoverflow.com/a/17053050/1367361
The route is defined as:
this.route('display', {path: '*document_path'});
After entering URL like this:
http://localhost/#/display/some/document.html
The route:display invokes model method with parameter:
{ document_path: "some/document.html" }
I want to be able to pass # sign in the document_path, but entering URL like this:
http://localhost/#/display/some/document.html#some-paragraph
cuts everything after the # sign and passes:
{ document_path: "some/document.html" }
into the model.
I know that it works if I change locationType to history. But at the moment for some reason I want to use hash locationType.
It is possible to pass the # as a dynamic segment when using locationType: hash?

Angular hashtag changing file path

I'm trying to create 2 separate applications within one site using AngularJS, and I'm trying to figure out how the RouteConfig interacts with the hashtag angular adds to the url.
Basically,
I enter [sitename]/App1
and this is changed to [sitename]/App1#/ by angular, and everything works fine.
However if I enter [sitename]/App1/ this is changed to [sitename]/App1/#/ and everything breaks because it starts looking for html files under http://[sitename]/App1/Views/Angular/[file.html] instead of http://[sitename]/Views/Angular/[file.html] where they are located.
Why does this happen? Why does that extra slash added in there cause angular to change the path it looks for files?
Edit: Routing is as follows,
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "home", action = "Index", id = UrlParameter.Optional }
);

How do I correct [object%20Object] in URL path when using EmberJS transitionToRoute from Controller?

I'm attempting to setup an action in a template to transition users to another route based on a dynamically generated navbar, using a combination of json / and js that is executed client side. I've managed to configure my application so that I can generate regular paths that work, but I would like to use transitions to avoid additional page loads.
A gist with what is (hopefully) the necessary information is:
https://gist.github.com/rjfranco/5289201
JS:
App.Router.map ->
#route 'index', {path: "/#{short_name}"}
#route 'customList', {path: "/#{short_name}/custom-list/:list_name"}
#route 'multiLevelList', {path: "/#{short_name}/multi-level-list/:list_name/:list_level"}
App.EventController = Em.ObjectController.extend
goTo: (navbar_icon) ->
#transitionToRoute navbar_icon.route, navbar_icon.context
# Sample passed navbar_icon
navbar_icon =
img_src: '/somesource_or_another.jpg'
display_name: 'My Link Name!'
route: 'customList'
context: {list_name: 'Exhibitors'}
template:
{{#each controller.navbarIcons}}
<li><a {{action goTo this}}><img {{bindAttr src="image_src"}} width="36" height="36" />{{display_name}}</a></li>
{{/each}}
The expected page actually loads fine, but the url the application transitions to is not correct, and refreshing breaks the application.
I'm expecting a URL along the lines of: /ruhaha/custom-list/Exhibitors
and I end up with one like: /ruhaha/custom-list/[object%20Object]
Slight update:
I've found that I could abuse a couple of methods on the app to produce the results I want:
App.handleURL('/ruhaha/custom-list/Exhibitors')
App.Router.router.replaceURL('/ruhaha/custom-list/Exhibitors')
This will actually trigger the route, and replace the url effectively transitioning my application to the state I want without a page request. Although this works I'm pretty certain this is the wrong way to take care of this issue.

I ended up resolving this issue (with some help from nerdyworm on freenode) by specifying a serialize method in my route that just returned the param I was expecting:
App.CustomListRoute = Em.Route.extend
serialize: (params) ->
params