if my router says
#resources "homes"
and i navigate to
/homes
everything loads
but if i have
#match '/', to: 'homes#index'
and navigate to /
nothing happens. I just get my template.
I fixed this myself and sent a PR and it seems to work as expected.
Related
So I've got a Vue Router running in history mode. It works perfectly when clicking <router-links>, but I can't get address bar navigations to 'stick'. The address always reverts back to the previous URL, despite loading the correct page content.
You can replicate this yourself by running vue create projectName and choosing Manually select features -> Router -> Vue 3.x -> Use history mode (Y). This creates the example project below.
If you navigate to http://localhost:8080/about, the About view loads. Correct.
Now if you type http://localhost:8080/, the Home view loads, but the URL reverts to /about!
And if you type http://localhost:8080/about again, the exact opposite happens.
Am I doing something wrong, or is this a bug in Vue Router 4?
Turns out this is a bug exclusively in Vivaldi. Popular browsers show the expected behaviour with Vue Router, even other Chromium browsers.
I really should've checked that to begin with. Hope this helps someone else, though!
I am using vue router and have already set mode to history. My app works fine except that when i try to use hash (#) in url in order to scroll the page to an element in the same page (eg: #information) the page reloads (meaning it re-requests data from my backend). I think the router thinks the page has changed and tries to load that page.
EDIT: The page does not really reload. It re-fetches data from by backend. I understand this as a reload though.
I tried googling but all i get is how to use history mode. Maybe i am searching the wrong way.
Any clues on how to fix this?
Here is my route:
{
path: '/p/:idormpn/:slug',
name: 'Productpage',
component: Productpage
}
Here is an example of what is happening:
https://www.e-checkout.gr/p/63529/dermatina-anatomika-pedila-mavro
Thanks!
I have a question with vue router. I'm working on a custom library of vue that most of the code has already been created before me. My question has to do with trying to get a page to use a back button on the page that works on a registration process flow (it works on all other pages, besides this one particular page).
I'm not quite sure whats exactly going on with why it's acting a certain way with the '#', which I assume is going to be the problem:
The flow of the app should go like this:
http://localhost:8080/#/events, hitting the 'Continue' button goes to the next page (product page)
http://localhost:8080/#/product, hitting the 'Continue' button goes to the next page (upgrade page)
http://localhost:8080/upgrade#/, hitting the 'Continue' button goes to the next page (payment page)
Each page has a back button on the page to go back to the previous one. Going from '/upgrade#/' and hitting the back button, the app gives me a link to a blank page with this URL:
http://localhost:8080/upgrade#/product
I'm not sure from when we are on the page of:
http://localhost:8080/#/product
and hit the Continue button, why the '#' moves to after '/upgrade'.
This is our method we are using to change pages:
changeRoute() {
this.$router.push("/product");
}
What you want is to put vue-router mode to history.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
The default mode for vue-router is hash mode, which is why you are seeing this behaviour.
I want to remove hash(#) from url in vuejs using vue-router in Laravel. So I used mode:'history' or history: true
const router = new VueRouter({
routes: routes,
mode: 'history'
//history: true
});
and it works perfectly but the problem is that each time request is changed for example from example.com/home to example.com/user the request will be sent to server and all the page will be refreshed however I want to only change the content between head and foot of the page. So when I mark an string in the top menu it will not unmarked when going to another url but now it sends the server and the page loads completely when not using mode:'hash'.
How can I remove hash without sending another request to server in order not to load the page again completely and load only body part?
Thanks
I don't have created links yet I just change it manually in url. If you are saying that doesn't work manually so why it works with mode: 'hash'? So if router-link works just like that I should use it I think. I didn't know about that
ok… I get it
if you are using history mode, you have to use <route-link> because, as noted above,
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page.
When you enter a new url, the browser loads that page, that's the browser's way of operating and you can't get around that. The framework however handler it differently, by updating the url and the content, but not actually redirecting(reloading)
The reason why this works with the hashbang, is that the broser treats everything after the # character as in-page navigation. Meaning it doesn't consider it as a redirect. The hash character was traditionally used in HTML to allow navigate to items within a page.
For example, about-us.html#contact redirects a user to the about page and scrolls to the contact form.
The modern js frameworks use the hash to hack this navigation by not redirecting, and using the content after the hash to pass routes.
For example, if you have a route such as localhost:8080/#/about-us, the localhost:8080/# part is the same as localhost:8080/index.html# so changing anything after the # character keeps the browser on the same page, and the javascript (vue router) handles any changes that are needed.
Hope this clears it up. Fwiw, I haven't used history mode on any of my projects.
Simple question:
I have added the following to my routes. rb
match 'settings' => 'users#edit'
I'm trying to make a user settings page at /settings (just with the edit form and the update button).
I have created the edit/update methods in my User controller, and added the edit view and _form.
For some reason when I go to /settings I am getting:
No route matches {:action=>"show", :controller=>"users"}
(Even though users#show exists)
Strangely, I can get it to work fine to route to users#show if I change my routes.rb - but that's not what I want!
I guess I'm missing something obvious - can someone point me in the right direction?
Does this issue go away when you restart your dev server? Routes are funny when created after the server is running.
Turns out commenting out my link_to fixed it..