How to implement redirection vue

During the Vue application development process, redirection is a common requirement. For example, after a user successfully logs in, he or she needs to be redirected to the homepage. In this article, we will explore how to implement redirection in Vue.

1. Navigation guard using Vue Router

Vue Router is the official routing manager of Vue.js. In Vue Router, there is a navigation guard mechanism, its main function is to enter the guard before the route changes and enter the guard after the route changes.

When implementing the redirection function, we can use the navigation guard function of Vue Router to enter the guard before the route changes, and then perform the redirection operation through the routing object.

Specifically, we can set navigation guards in the routing configuration file, as shown below:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true, // 需要登录
    },
  },
];

const router = new Router({
  routes,
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token'); // 判断是否登录
  if (to.meta.needLogin) { // 判断是否需要登录
    if (isLogin) {
      next();
    } else {
      next({
        name: 'login', // 跳转到登录页面
      });
    }
  } else {
    next();
  }
});

export default router;

In the above code, we first define two routes, namely the login page and Home page. In the routing configuration of the home page, we added a meta attribute to mark that the page requires login to access. Then, in the navigation guard, we determine whether the user is logged in and whether the current page requires login. If the user is already logged in and the current page requires login, you can continue to access the page, otherwise the user will be redirected to the login page.

2. Use Vue Router's programmatic navigation

In addition to using navigation guards to implement redirection, we can also use Vue Router's programmatic navigation to implement the redirection function.

Vue Router provides two methods to implement programmatic navigation:

• this.$router.push(location, onComplete?, onAbort?): used to switch routes, you can Keep browser history.
• this.$router.replace(location, onComplete?, onAbort?): Used to switch routes and replace browser history.

We can implement redirection by calling the push or replace method in the component that needs to be redirected.

For example, after the user logs in successfully, we can redirect him to the homepage, the code is as follows:

// 用户登录成功后，进行重定向操作
this.$router.push('/home');

3. Use meta combined with programmatic navigation

If we need If you need to pass some parameters when redirecting, or need to dynamically calculate the target address of redirection, you need to use meta combined with programmatic navigation to achieve this.

Specifically, we can set the meta attribute in the routing configuration to store some parameters or the calculated target address, and then redirect through programmatic navigation in the component.

The following is a sample code:

// 路由配置文件
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('@/views/profile.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/redirect',
    name: 'redirect',
    component: () => import('@/views/redirect.vue'),
  },
];

// 跳转到profile页面，需要登录且传递了参数
this.$router.push({
  name: 'redirect',
  query: {
    redirectTo: 'profile',
    params: {
      username: '张三',
      age: 18,
    },
  },
});

In the above code, we define a redirect route to receive the redirected target address. In the front-end code, we pass the page that needs to be redirected as the query parameter to the redirect route by calling the $router.push method, and then in the redirect component, obtain the query parameter and perform the redirection operation.

4. Global guards using Navigation Guards

Vue Router provides a global guard mechanism, through which global guards can perform some operations before and after routing changes, such as recording user access logs, global interception, etc. .

In the global guard, we can use the next method to perform redirection operations. For example, the following code automatically jumps to the mobile page when the window size is less than a certain value:

// 全局守卫
router.beforeEach((to, from ,next) => {
  const userAgentInfo = navigator.userAgent;
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  let flag = true;
  for (let i = 0; i < Agents.length; i++) {
    if (userAgentInfo.indexOf(Agents[i]) > 0) {
      flag = false;
      break;
    }
  }
  if (flag && window.innerWidth < 768) {
    next('/mobile');
  } else {
    next();
  }
})

In the above code, we determine the window size and device type in the global guard. If If the conditions are met, use the next method to perform the redirection operation.

Summary

This article introduces various ways to implement redirection in Vue applications, including using Vue Router's navigation guards, programmatic navigation and global guards, as well as methods of passing parameters in combination with meta. . In actual development, we can choose the most suitable way to implement the redirection function according to our needs.

The above is the detailed content of How to implement redirection vue. For more information, please follow other related articles on the PHP Chinese website!