I have a webpage with a fixed Header. There I have the items "Main Accounts" and "Sub Accounts". The pages are completly the same and have the same functionality except that they call different routes of the API to fetch different data. I dont want two different files for that. Everything should be one file and I just read a variable and change the url depends on that.
My header has some nav-items:
<b-nav-item to="/accounts">Main</b-nav-item>
<b-nav-item to="/accounts">Subs</b-nav-item>
Now I need to pass a variable to that redirection, that I can read in the accounts page and then change the link for getting datas.
I tried so far:
<b-nav-item to="/accounts?main=true">Main</b-nav-item>
<b-nav-item to="/accounts?main=false">Subs</b-nav-item>
I can read the parameter in that url with this.$route.query.main, but my problem is, the page doesnt reload, if I switch between the 2 pages. The url is changing, but I dont know how to react to that change.
I tried it with a click event and force reload:
#click="$router.go({path:'/accounts', force:true})
but that forces to reload the complete page.
My favourite solution would be to create a folder structure or whatever. Then have two routes:
/mainaccounts and /subaccounts but both lead to the same file and in that file I read that the parameter and then decide what route I have to call depending on the link
Okay, found a solution.
I created the following file tree:
accounts/_test/index.vue
And in my header I have a nuxt-link:
<NuxtLink :to="{name:'accounts-test', params: {test: 'main'}}>
And it works as expected.
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
When I build my VueJs application, it automatically imports the app.js and chunk-vendor.js files with the preload attribute. This is great as it speeds up the page load time of my application.
I've looked at #vue/preload-webpack-plugin and I can see that I can preload specific webchunks or assets. This has the effect of preloading those files on all routes.
The thing I would really like to do is preload webchunks based on the initial route that is loaded (the first route the user visits).
Lets say I have two routes; home and accounts. Both of these routes are lazy loaded. When a user opens /home as their first page, I would like to preload the js and css webchunks related to the homepage. If the user initially opens the /accounts page, I would like to preload the webchunks related to the accounts page.
Its not possible to use wildcards in preload statements, so I know I can't do this statically.
Any ideas of how this could work? Has anyone heard of such a project being suggested elsewhere?
EDIT: Something I tried as an experiment was injecting preload headers into my index.html file using the beforeRouteEnter method. Whilst I could see the preload header in my DOM, I found that browsers did not observe the header in time, so the image I was experimenting with was not pre-loaded. In any case, this wouldn't have worked for a dynamically named file, but useful to know.
With SSR it is possible and framework like Nuxt does it automatically, because it builds separate html file for each route. So this html can be "tailored" for this specific route and include/preload all the code route needs...
Without SSR it much harder. #vue/preload-webpack-plugin works by injecting preload links into the index.html at build time and since there is only one index.html for a whole app, you can't make it route dependent (with this plugin). So what Vue CLI does is prefetching all the async chunks by default (clearly preferring speed over bandwidth usage)
I can imagine a solution in the form of Webpack plugin, which replaces preload-webpack-plugin and instead of generating preload/prefetch links at build time just generates some inline script with the map of "route name => chunk name" (some well defined naming convention would be needed) that would inject the links dynamically to the DOM base on the current URL. But even with my "googling skills" I wasn't able to find anything like that...
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.
is it possible to create an empty html file say ex : myname.html
I tried to create a layout and add it to a page, but it seems the layout cannot be empty.
I got an error while creating an empty layout file.
Is there anyway to achieve this?
Sorry i cannot post this under "Shopify" tag under webmaster or meta version or stackexchange,
because there is no such tag in it.
If it's okay for the URL of the page to be /pages/myname and not /myname.html, then here's another work-around:
Go To Blogs & Pages and create a page. Call it, say, 'My Page'. Give it the handle 'myname'.
Go to Themes > Template Editor, and create a new 'page' template under Templates. Call it say, 'special'. The name of the file will become page.special.liquid.
Delete the content of that file. At the top of the file, add this: {% layout none %}, then add your HTML. Save.
Go back to your 'My Page' under Blogs & Pages, and assign your page.special template to it. Save.
See this for more info: http://support.shopify.com/customer/portal/articles/263930-creating-and-using-an-alternate-template-for-pages-products-collections-and-blogs
Unfortunately, you can’t do this in Shopify.
However, if you can deal with redirects, what you could do is make an empty html file under /admin/files/list and redirect to that.
There's a good visual explanation on how to do this with redirects a little way down this thread:
http://ecommerce.shopify.com/c/ecommerce-marketing/t/verifying-website-on-pinterest-112464
(To verify for Pinterest for Business, but should work with others as well)
To sum up:
1. Upload the verification file to account > Show uploaded files
2. Grab the URL
3. Go to Navigation > URL Redirects
4. Add verification URL as 'old path' and actual position of file as 'new path'.
5. Verify