How to achieve redirection to another page in vue. Js

In Vue.js, implementing page redirection typically involves using Vue Router, which is the official routing manager for Vue.js. Vue Router allows you to define page routes, navigation, and nested routes. Here are several methods to implement page redirection in a Vue application:

1. Using redirect in Route Configuration

In Vue Router's route configuration, you can define a route rule with the redirect property to redirect to another route.

javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
    // When users access '/a', the page redirects to '/b'
  ]
})

2. Using Programmatic Navigation in Components

You can use the push or replace methods of the router instance within Vue component methods to navigate to another page.

javascript
this.$router.push('/target-page'); // Navigates to the target page, equivalent to clicking a link
// or
this.$router.replace('/target-page'); // Replaces the current history entry

3. Using Navigation Guards for Redirection

Vue Router provides global and route-specific navigation guards, where you can perform redirection.

javascript
router.beforeEach((to, from, next) => {
  if (to.path === '/a') {
    next('/b'); // Redirects to '/b' if accessing '/a'
  } else {
    next(); // Proceeds normally
  }
});

4. Using <router-link> for Declarative Navigation

Although <router-link> is primarily used for declarative navigation, it can also trigger redirection.

html
<router-link to="/target-page">Go to Target Page</router-link>

After setting up the redirection route rule, clicking this link will navigate the application to /target-page.

Example

Suppose you have a login page where users need to be redirected to the homepage after successful login. You can implement this using programmatic navigation in the login method:

javascript
// Login.vue
export default {
  methods: {
    login() {
      // Login logic...
      if (/* Login successful */) {
        this.$router.push('/home'); // Redirects to the homepage
      }
    }
  }
}

Redirection is a common feature in single-page applications, and Vue Router offers flexible approaches to handle page navigation in various scenarios. In real-world applications, you may need to consider business logic to select the appropriate redirection method.

If you want to navigate to another page, use this:

javascript
this.$router.push({ path: '/pagename' });

If you want to navigate to another page with parameters, use this:

javascript
this.$router.push({
  path: '/pagename',
  params: {
    param1: 'value1',
    param2: 'value2'
  }
});

If you are using Vue Router, you can use router.push(path) to programmatically navigate to any specific route. Note that this is the router.go(path) method used in Vue 2.

$router can be accessed as a property on the Vue instance, meaning you can use this.$router.push(path).

You can also use object syntax for more control, including navigating to pre-configured named routes. From the documentation:

shell
// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

Besides Vue Router, window.location.href = 'some url'; is also applicable for non-single-page applications.

---

If you are looking for a more permanent redirection rather than just programmatic navigation, for example, redirecting all clicks on example.com/foo to example.com/bar, then you should use Vue Router's redirection or alias feature.

Redirection

Redirection is located in the route configuration, allowing you to instruct Vue Router to always redirect a given path to another location, for example, navigating to /foo will redirect you to /bar:

shell
const routes = [{ path: '/foo', redirect: '/bar' }];

These paths can also be dynamic, for example:

shell
const routes = [{ path: '/foo/:subPath*', redirect: '/bar/:subPath*' }];
// example.com/foo/profile?id=123 --> example.com/bar/profile?id=123

Alias

Alias works similarly to redirection, routing traffic from one location to another, but they do not change the user's URL. This allows you to map any part of the UI structure to any path you desire, providing greater flexibility.

From the documentation:

shell
const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // this will render the UserList component for these 3 URLs:
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]