Using vue-router, I have a component check user login status, how can I redirect to the login page URL using the router?
In component, my code:
<script>
export default {
components: {
},
name: 'landing-page',
created: function () {
const router = this.$router
router.go({path: '/login'})
}
}
</script>
But router.go does not work.
Oh, use router.push('/login') can working fine.
Remember that router.go takes a single integer parameter that indicates by how many steps to go forwards or go backwards in the history stack. So to give a path you should use router.push('your_url').
For more information I suggest you read this:
Vuerouter
Related
I have a website built using Docusaurus 2.
I'm wondering if it is possible to add optional parameters to the URL of the site. For example, I may want to have https://www.example.com/docs/introduction?param=abc, then I will use the value of param in my components.
Is it feasible in Docusaurus?
Not sure if I'm understand your question, but I don't see why not. Having query params wouldn't change the URL, you just need to use window.location.search and parse the params, or use React Router's APIs to do it for you.
ReactJS way:
import { useHistory, useLocation } from '#docusaurus/router';
function YourComponent() {
const history = useHistory();
const setSearch = () => {
history.push({
search: `name=${value}`,
});
}
// ...your logic
}
I am creating a VueJS app in which the user fills out a 5-step form.
These steps are routed to /step-1 through /step-5 in the Vue Router. However, I would like the site to return to the index page (/) when refreshing the page.
I could use abstract mode for this – but the result page is generated from the following url: /result/:userid in which I need the state to be history in order to be able to get the userid from the URL (and then do a post request to the server).
I also want this URL to be accessible even after finishing the form, so abstract here is not an option unfortunately.
So – is it possible to use both modes? Refresh the page to index.html when refreshing the form-pages, but then use history mode to render the result?
You cannot do this. It is either history or abstract but not both. Having said this, there are a couple of things you can do.
Approach 1: Use history mode with steps as query params
So instead of having routes like /step-1 or /step-2, use then as part of query params. So you will have routes like:
Index route: example.com/?step=1, example.com/?step=2
Result route: example.com/result/:userId
Approach 2: Use abstract mode with higher order component
Here, you will have a router with abstract but it will only serve as a state router and won't help with any browser URL manipulation.
Build a higher order component like AppComponent where you will have your own regular expressions to determine the route. It would look like:
// Should match route /result/:userId
const IS_RESULT = new RegExp('/result/(\\d+)$');
// User RegExp groups
const IS_STEP = new RegExp('/step-(\\d+)$');
export default class AppComponent extends Vue {
// Use Vue.js created hook
created() {
const path = window.location.pathname;
// Top level routing of the application
if (IS_STEP.test(path)) {
// Do something. You are in step-1/step-2/etc.
} if (IS_RESULT.test(path)) {
// Do something. You are in /result/:userId
// Get userId
const groups = IS_RESULT.exec(path);
const userId = groups[1];
} else {
// Goto Error page
throw new Error('Unknown route');
}
}
}
Approach 3: Use Multi-page SPA
Here, you will create two single page application. The first app will have routes /step-1, /step-2, etc. You will use abstract mode for this. The second application will have /result/:userId route with history mode.
In this architecture, when a user is on step-5, instead of pushing a new state to the router, you will use HTML5 history API to change the router and then cause a forced page refresh. Also, there are other ways you achieve this.
You can simply have a redirect in native javascript where you call it window.location.href('yourHomePage.com') and it will do a full refresh.
I have a component, that's actually a modal dialog.
When I am done with that dialog and press the "Ok" button, I want to stay on the stay page from where I opened that dialog.
Which isn't difficult.
But the problem is that the dialog changes the data (I am getting data through a REST call) so I need to refresh the route that I already am on to reflect the data changes.
Since, I am calling it from a component, I don't have Route so can't call route.refresh().
I tried to get the router:
this.set('router', Ember.getOwner(this).lookup('router:main'));
and did transition to the same page:
_this.get('router').transitionTo('my-route')
But since the route hasn't changed (I only opened a dialog), transitionTo doesn't get triggered!
Is there a way I can force trigger transitionTo or refresh the page that I am on?
Thank you!
First, you can easily get the current route name by injecting the routing service to the component.
Then, you can get the current route instance and apply its refresh method:
// app/components/a-component.js
import Component from "ember-component";
import service from "ember-service/inject";
import getOwner from "ember-owner/get";
export default Component.extend({
routing: service("-routing"),
actions: {
refresh() {
const currentRouteName = this.get("routing.currentRouteName");
const currentRouteInstance = getOwner(this).lookup(`route:${currentRouteName}`);
currentRouteInstance.refresh();
}
}
});
For this, define refreshCurrentRoute method in nearest route or in application route file.
actions:{
refreshCurrentRoute(){
this.refresh();
}
}
From your component, you need to call refreshCurrentRoute action. either you can use ember-route-action-helper or by passing the closure action.
I already use this Vue.js Routing example application.
https://github.com/chrisvfritz/vue-2.0-simple-routing-example
In the src/main.js
I have so much data value .
const app = new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname,
token : "",
errorMessage : '', etc...etc..
},
Now with socket.io i set the token to "sdawdda2d2ada2ad22ad"
When application start than the currentRoute is equal with "/"
Its okey, the first page loaded. src/routes.js
'/': 'Home',
'/about': 'About'
When i want to check the /about (url: localhost:8080/about), than its works good , but the token and errorMessage is empty again, because the app created again.
If i want to change page without lose the token value i can use:
this.currentRoute = "/about" (url: localhost:8080)
Its works good , but the url not change, so i cant use back button in browser.
How can i separate my Vue app, if i dont want to lose token value when the browser go to /about?
Thanks so much!
you can do something like this.$router.go(-1) or vm.$router.go(-1) to go forward this.$router.go(1) for more click here
simple way
<template lang="html">
<div>
<button #click="goBack">
Back
</button>
</div>
</template>
<script>
export default {
methods: {
goBack() {
this.$router.go(-1)
}
}
}
</script>
When you are moving from your Home route to About route, you need to use <router-link> to navigate.
From your home page, you can navigate to about page as follows:
<router-link to="/about">Go to my About Page</router-link>
That generates a regular html anchor tag <a> with the path set correctly. When you click on that, it will take you to the about component, and not refresh the entire html webpage (with app scripts) from server.
When only the route component gets changed, all your other Vue params like token on the Vue instance will remain.
Please take a look at the vue-router here: http://router.vuejs.org/en/essentials/getting-started.html
Remember to have a placeholder for routes in your main app as follows: <router-view></router-view>. Your Home and About component will get rendered into this router-view as you change routes.
when u seem to require forward in reactjs we used to put a Link or button ,and then consumer click it ,then the page reload corresponding path of router . Now,I want the page turn to other path of router when I request a post and the status of response is 200. It can't use a link or button ,could reactjs use code to do this? like : CertainComponent.setPath(otherPath); CertainComponent.turn;
My English is poor , it may be not clear to delive the function which i want to do.
Thanks！
I think you want to use this.context.router.push('/users/12')
https://github.com/reactjs/react-router/blob/master/docs/API.md#routercontext
First of all the component you are using has to be a container, which means you have to create it with connect() so it has access on store and dispatch:
let MyComponent = ({ dispatch, store }) => {
store.routing.push('url');
}
export default connect()(MyComponent)
And this depends how you named the router key on your store when you combined the routing reducer from redux-router on your store.
There is also another alternative, where you could do
import { hashHistory } from 'react-router';
hashHistory.push('next-url');