I have created a default Vue CLI 3 project (with vue-router) but beside webapp I'd also like to have few static pages (eg. about, faq, terms etc...) that do not require vue framework or any special javascript logic.
So I've added faq.html in /public folder and I tried to access it via https://localhost:8080/faq but I always get index.html page where vue is taking over and loading my app.
How can I have static html pages in public folder not to be handled by vue-router and instead just delivered to the browser?
You should use History mode.
I think you run it on Windows, if you want to access the router from Pullic you must use History mode,
so your router will look like this
/index.html#/faq
if you run it on your server. the router will works fine without history mode
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Related
I'm working on a Vue 3 app (using Quasar) with Vue Router. I want the user to be able to click on certain links (with paths beginning '/api/') which bypass the router completely and go straight to the backend API. But everything is getting picked up instead by the catch-all route (path: "/:catchAll(.*)*"). I tried adding a route without a matching component, path: "/api/*", but that doesn't work.
Is there a way for me to tell the router to ignore certain paths and let them be handled by the server?
I am trying to solve the problem of SEO being bad on my Vue (SPA) website and am researching the prerender plugins available for Vue 3.
However, it seems that the plugin is unable to read routes that are in WebHashHistory mode as the paths start with '#'.
Is there any way around this?
You can remove # from url by adding mode: 'history' to the vue router
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
More details here
my website is https://jaylanthedev.com/#/ but for some reason it needs to # sign to get to any other page that is not the homepage. I am very confused as to why this is. It is a vue app hosted on azure and after googling I am not able to get very far with this. Also not sure if this is a vue problem or a azure problem. Anyone have any ideas?
Ex:
Works: https://jaylanthedev.com/#/about
Does not work: https://jaylanthedev.com/about
If you read here:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
The default mode for vue-router is hash mode - it uses the URL hash to
simulate a full URL so that the page won't be reloaded when the URL
changes.
So Vue has a default hash to load its routes.
To switch to history mode:
const router = new VueRouter({
mode: 'history',
routes: routes
})
But - this means that you need a server to render your pages. You need to have your client be running on a node server like express or anything similar so it can route the pages without re-rendering.
I created a website with several pages on Vue.js.
Everything is working fine locally, but when I deploy to Heroku, all pages are only working when I click on an internal link in my menu that redirects to the corresponding page (using router push).
When I try to access directly /any-page from the browser I get a 404 with a message saying "Cannot GET /any-page" whereas the same page is displayed correctly via a click on a link.
As I mentioned when I locally serve my app I don't have this problem.
I really can't see where this can come from, thanks in advance for your help.
There's a deployment guide specifically for Heroku in the official Vue CLI documentation.
You'll quickly notice the relevant information:
static.json
{
"root": "dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
For SPA's (Single Page Applications), you'll want to point every route to the index. Vue router will take care of navigating to the proper page.
Heroku is serving the contents of your Vue build folder. Since Vue builds the app as a single index.html file, only the main route works.
Vue doesn't actually navigate to the route, it rather rewrites the the browser url using the history API and handles the loading of the new route.
You could use one of these options:
OPTION 1
You could use mode: "hash" to fix routes when reloading the page. However this will add a # before every route.
const router = new VueRouter({
mode: "hash",
routes: [...]
})
OPTION 2
Write an Node.JS (eg Express) app that routes every request to your index.html file. This is called a middleware
Reference: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I have a single page (SPA) application written in Vue.
Now I need a separate page that should be available without being signed in.
To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).
From SPA View, i would likely go like this
Inside /views folder
- HomePage.vue (no auth)
- Login.vue
- /users/ subfolder (auth needed)
- DashBoard.vue
- About.vue
etc
Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.
and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.