I have a vue js webapp which is hosted in www.example.com/app and the home page of the application is hosted in www.example.com as a separate vue js app using nginx. whenever the user hits, www.example.com/app/home I want to redirect to www.example.com.
right now I am doing,
//router.js
{
path: "/home",
beforeEnter(to, from, next) {
window.location.href = "https://www.example.com";
}
},
inside the route.js of example.com/app to achieve this. But in the localhost and the dev environment, this method won't work for obvious reasons. Is there a more convenient way to do this?
I think you can redirect with relative URL.
window.location.href = "/";
Related
Basically I want the root route '/' to be redirected to my '/home' route.
My Nuxt app is hosted on Netlify so I tried to do this is the _redirects file
/ /home
as per their redirect docs - but it's not working.
Now I know that in Vue in the router config you can set up redirects, but how do I achieve the same thing in Nuxt??
any help would be appreciated!
In your main index.vue page you would add:
<script>
export default {
middleware: 'redirect'
}
</script>
Then you would create a middleware to actually redirect to desired page, in middleware > redirect.js:
export default function ({ store, redirect }) {
return redirect('/home')
}
I have an external web site and vue app on the same domain. I want programmatically redirects a user from vue app to external web site with a full page reload.
Example
http://example.com --> vue + vue-router App
http://example.com/external-site --> external web site
In Vue 2.x, you can create a route that will go to an external URL by adding a route like this:
{
path: "/Stackoverflow",
component: Stackoverflow,
beforeEnter(to, from, next) {
window.location.href = "https://stackoverflow.com";
}
}
Activate using:
this.$router.push({ path: '/Stackoverflow' });
All you need is:
window.location.href = "http://example.com";
I explain my problem,
I have a Gcloud domain "example.appspot.com" (for example) with a website from squareSpace. I would like to add a web application in node.js on this domain without overwriting the original site.
I would like to connect the user at the web app on this link "example.appspot.com/webApp/". And if you go at "example.appspot.com" you are on the squareSpace website.
If I deploy the web application and go to "example.appspot.com", I have the web application, but the website from squareSpace is down ...
Yet my application has no "get or post" for "/", the first page is "/login".
If I go on "/" I just have "Cannot GET /"
I tried to use dispath.yaml but it don't work.
dispatch:
- url: "example.appspot.com/webApp"
service: default
Nothing change and "example.appspot.com/webApp" not work...
And i tried to use openapi-appengine.yaml.
swagger: "2.0"
info:
description: "WebApp"
title: "Title WebApp"
version: "1.0.0"
host: "example.appspot.com/webApp"
But it don't want the "/" in host.
I tried to use a handlers in app.yaml but it not work...
I don't find solution.
Do you have any idea how I can tell gcloud to use the application only on "/ webApp/" ?
I'm sorry for my bad english level, i improve it every day.
There are two ways to achieve this, depending on your scenario:
1) Express routes:
each route executes the logic you need. Node works with a module.exports/require system, so for each route you can have a different JS file that exports all due functions, used in the route's code.
Example:
server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const index = require('./index');
res.send(index.hello());
});
app.get('/webapp', (req, res) => {
const webapp = require('./webapp');
res.send(webapp.appFunction());
});
index.js
exports.hello = function() {
return "Hello";
}
webapp.js
exports.appFunction = function() {
return "App Function";
}
2) Service redirect: If you need a full app working at some endpoint and not some functions, then you can deploy the webapp as a distinct service within the same application, and redirect the client request to this service at a given endpoint.
For this, create and deploy your webapp service exactly as the default app from its own folder, with a dedicated package.json and app.yaml. Just specify the service name in app.yaml: service: webapp
Once deployed, your service will be available at a weblink in the form https://[SERVICE_ID]-dot-[MY_PROJECT_ID].appspot.com, which you can use to redirect from your default application's endpoint:
app.get('/webapp', (req, res) => {
res.redirect('https://[SERVICE_ID]-dot-[MY_PROJECT_ID].appspot.com');
});
More info about services and routing here. You can also manage routing with dispatch.yaml:
Example if your service ID is "webapp"
dispatch:
- url: "example.appspot.com/webApp"
service: webapp
I have a Vue CLI 3 based app which I would like to function as a PWA.
I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.
When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html).
At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:
pwa: {
workboxOptions: {
skipWaiting: true,
navigateFallback: 'index.html'
}
}
and I saw that the following was indeed added to service-worker.js:
workbox.skipWaiting();
...
workbox.routing.registerNavigationRoute("index.html");
but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.
Does anyone have a clue what I might be missing?
Thanks
I have the same problem, i solved it by adding this in the end of my router.js
{
path: '*', // or '/index.html'
beforeEnter: (to, from, next) => {
next('/')
}
}
Try /index.html instead of index.html.
I'm getting some issues when trying to redirect to an external link.
for ex:
{ path: '*', redirect: 'https://google.com'}
when I use "redirect" it doesn't work completely, but when I use something like that
{ path: '/*',
beforeEnter(to, from, next) {
window.location = "https://google.com"
}
}
it works but there is a problem because first, it tries to render App component again but there is no component so be empty and a blank page is being rendered for nearly 1-1.5 second then it redirects to target URL and I don't want it to reload App component, just redirect it to other link. I googled but found nothing noteworthy.
Or maybe is there another way like deactive a component or use v-if or directly rendering a html file?
redirect is meant to redirect to another route defined by your application, not to go to another website directly.
window.location works, but I think the behavior is somewhat browser-dependent.