How can you set a dynamic base url using the vi18n as a base so the link would look like <host>/<vi18n>/, so when the user changes the locale it will be displayed on the url, however if i refresh the page with the url like <host>/<vi18n>/ it results to a page not found but it works when refreshing a <host>/. I also used a service-worker for it to work offline.
Related
By default, nuxt adds a route for each page in pages.
I want to make when going to the page e.g. project.local/id/ec29cjsa5fas512ik, the user goes to a page template and the Vue receives this ec29cjsa5fas512ik id from the url so it can make proper API calls later.
You can make a dynamic page in Nuxt2 with the following file, eg.
/pages/details/_id.vue
then you'll have a path like /details/:id.
More info can be found here: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes
Can someone tell me why the following component is loaded when I refresh the browser?
Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue
Let me explain.
What I want to happen and my expected output:
1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data
3.) The URL did not change.
What actually happens and the unexpected output:
1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .
3a.) The URL did not change.
Why does #2a happen? The URL has not changed but the component did.
What am I doing wrong? Here is my NuxtJS folder structure:
To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;
_myPage.vue or add a folder named _myPage containg a index.vue file inside.
But your example won't work because nuxt is missing the "doss" route from your link / menu item.
Working example;
https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue
URL path will result in /doss/xxx
Also see; Nuxt dynamic pages
I've tried to change meta tag content like
document.title = response.data.seo_page_title[0].text;
document.head.querySelector('meta[name=description]').content = response.data.seo_description;
it change the content when inspect the page but not when i use view soure. So Google, FB and Twitter can't recognize the updated content and doesn't load the proper text when i try to share the page on social media.
View Source shows the original source that has been fetched from the network - it is not the current snapshot of the page. As you have noticed - the current snapshot of the page is available in the DevTools. If you need Google / FB / etc. to see the proper text - you will have to produce this text on the server side (when composing the HTML template) instead of in the browser.
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.
how to prevent the change in the url of the browser bar from reflecting in the website content's URLS...
here is the situation,
in my current web app, I am using this
$this->createUrl(Yii::app()->controller->id ."/". Yii::app()->controller->action->id, $params)
to generate href of the hyperlinks... now the problem is,
when I type in the browser bar like e.g
www.mysite.com/blahblahblah/subcategory/c1
the blahblahblah, also reflects to the webpage content hyperlinks,because of the Yii::app()->controller->id that I passed to the createUrl function...any work around for this ?..., what i want to happen is, no matter what string is typed in the place of the controller name via the browser bar, it won't reflect in the webpage content hyperlinks ..
so how ?
the answer was, I took the ID from the URL ,created a simple Helper function and used that to return the correct value of category/subcategory and outputs it in the view source no matter what change is done via the browser bar