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.
Related
Using Vue 2, I want to run a check before any page elements are rendered, to determine whether the user is signed in and if so, redirect them to another page.
Looking at the Vue Lifecycle, it's my understanding that beforeMount is first in this cycle. However, the page still appears for half a second before redirecting (in my case, to Dashboard)
beforeMount() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.$router.push({ name: 'Dashboard'})
}
});
}
I've tried other Lifecycle options and none of the others work either. What am I doing wrong?
Looking at the Vue's lifecycle diagram:
beforeCreate and created hooks are earlier than beforeMount. You should use either one of them.
You have to use Guard for this. you have to check auth before going to route on router.js file. you can use beforeEnter into your route path.
read more about that here: https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
I see this question has been asked a few times on here, but none of the answers have really helped me in this current situation.
I have an app I'm working on with a sidebar with tabs that link to different dashboards. Each of the SidebarLinks are a router-link with the to key being fed the route prop from the main component.
Inside one of these dashboards, the Analysis dashboard, there is another router that routes you to child routes for specific Analyses with their own ids (EX: /analysis/1).
The user clicks on a button for a specific analysis and they are routed to a page containing that information, on the same page.
The Error
When I click the Analysis SidebarLink the route in the url changes back to /analysis, but the page doesn't update/refresh.
I don't get an error in the console, but I do get the failure in the devtools.
I understand that Vue Router doesn't route back to a route you are already on, but I need it to. If you refresh the page when the url is just /analysis it routes back to it's inital state.
Is there anyway to refresh when it rereoutes to /analysis? Or a way to handle this error to work as intended?
What I've tried
I've tried changing the router-link to an <a> tag and programatically use router.push and then catch the error, but that doesn't do anything.
I've tried checking if the route.fullPath.contains("/analysis") and then just do router.back() but that doesn't seem to work either.
SidebarLink router function
function goToRoute() {
console.log(`route.fullPath → `, route.fullPath)
if (route.fullPath.match('/analysis*') as any) {
console.log('route includes /analysis')
router.back()
} else {
console.log('route doesnt inclue /analysis')
router
.push({
path: props.route,
})
.catch(() => {})
}
}
Inital /analysis Page
This is what the page looks like normally
/analysis/1 Page
This is what the route to analysis/1 looks like (url changes)
/analysis/1 Page When Issue Analysis SidebarLink Clicked
This is what the route to analysis looks like when the sidebarlink is clicked (url changes, but the page stays the same)
I suspect you are fetching your data from a backend service or data files
If yes you can refetch the data everytime the route param changed by watching it.
watch: {
'$route.params.id': function (id) {
if(id)
this.$store.dispatch('fetchOneAnalys', id)
else
this.$store.dispatch('fetchAllAnalyses')
}
I'm having some "issues" with a project in Nuxt.js. I have created three pages: register.vue, login.vue and index.vue.
I was trying to do some functions with middleware in order to redirect between views in case that one user was logged in or not.
The thing is that i realized that in the browser, the 'register' page router shows like: localhost:xx/register/ and the login and index pages routes shows like: localhost:xx/login and localhost:xx/
The problem is why it appears a trailing slash in the register view and no in the others.
I have tried the:
trailingSlash: false
in the nuxt.config.js, and although it quits the trailing slash from the url, if I use the command:
$nuxt.$route.path
for obtaining the path, it still remains with the '/' in the case of the register view.
Any idea about this? Any help will be appreciated!!
With this kind of code, this is properly displaying the route path
<script>
export default {
fetch({ route }) {
console.log(route.path)
},
}
</script>
PS: I do also have trailingSlash: false.
How do I specify a catchall or actually a catch[most] for express so when the user selects refresh on a page that is actually contained in the app bundle, the GET doesn't fail.
home.html
profile
app.js
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'home' },
{ route: ['profile'], name: 'profile', moduleId: './profile/profile'}
]);
If I click on the profile link, the URL shows localhost://profile and the page renders correctly without performing a GET because the requested resource was bundled in the initial GET. But lets say I refresh the page with localhost://profile, then it makes a server GET request for that page.
If on the server I specify something like:
app.use('/', express.static(__dirname));
app.use('/profile', express.static(__dirname));
It works properly. I was anticipating some type of catch all formatting so I don't have to add every possible route for an app with all routes bundled. Something like:
app.use('/*', express.static(__dirname));
Then the following to capture GET's for another app
app.use('/othercoolapp/*', express.static(__dirname)+'/othercoolapp/');
But it doesn't work...
This issue you're encountering applies to every single page application framework and library with pushState routing enabled.
Above your app.listen or equivalent line of code in the file that bootstraps your Express server, add something like this:
app.get('*', function(request, response){
response.sendFile(path.join(__dirname + '/index.html'));
});
The general idea is that this generic wildcard route will capture all URL requests and send the index.html file. This allows Aurelia to handle its own routing.
I want bad routes to navigate to the root route. I've added a mapUnknownRoutes configuration on my router.
config.mapUnknownRoutes((inst) => inst.config.moduleId = 'home');
But this leaves the route untouched. For example, #/fakeRoute routes to home. Ideally, I would like a behavior similar to returning { redirect: '#/' }, which cancels navigation and creates a new navigation to the route '#/'. Is this a feature?
The mapUnknownRoutes method also accepts a RouteConfig object so you can just directly specify your redirect there:
config.mapUnknownRoutes({ redirect: '#/' });
See the complete signature of the method on github