路由页面跳转优化

1. 添加全局前置路由守卫 

import store from "@/store";
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    // 路由重定向
    redirect: "/home",
    component: () => import("@/views/layout"),
    children: [
      {
        path: "home",
        component: () => import("@/views/layout/childs/home"),
      },
      {
        path: "question",
        component: () => import("@/views/layout/childs/question"),
      },
      {
        path: "video",
        component: () => import("@/views/layout/childs/video"),
      },
      {
        path: "my",
        component: () => import("@/views/layout/childs/my"),
      },
    ],
  },
  {
    path: "/login",
    component: () => import("@/views/login"),
  },
  {
    path: "/search",
    component: () => import("@/views/search"),
  },
  {
    path: "/article/:id",
    component: () => import("@/views/article"),
  },
  {
    path: "/user/profile",
    component: () => import("@/views/user-profile"),
  },
  {
    path: "/history",
    component: () => import("@/views/user-history"),
  },
];

const router = new VueRouter({
  //   mode: "history",
  base: process.env.BASE_URL,
  routes,
});
// 导航守卫
// 1. 全局前置守卫 beforeEach  afterEach
// 2. 局部守卫
// 3. 页面独享守卫

// 全局前置守卫 任何路由跳转的时候都会先走这里
router.beforeEach((to, from, next) => {
  // 一定要调用 next 否则所有的页面都被拦截了，next 是放行
  // next(); // 放行
  // to 要去的页面地址
  // from 来自的页面地址
  // console.log(to.path); //  '/history'   要去的页面路由 path 信息
  // 定义一个需要登录（有token）才能过去的页面数组 比如 我的收藏 我的历史页面
  const authList = ["/history", "/user/profile"];
  // 如果去的是home等界面就不会进入 if 判断去判断是否登录了，home等一些界面是可以给游客看的
  // 特殊页面（要登录才能进入的页面）
  if (authList.includes(to.path)) {
    // 这个界面需要登录才可以访问
    // 判断是否登录了
    console.log("你进入必须登录才能访问的页面", to.path);
    // console.log(store.state.user);
    if (store.state.user) {
      // 登录了 可以进入
      next(); // 放行
    } else {
      // 未登录 去登录界面
      // 加上？参数（搜索参数）为了从登录之后返回当时的页面 而不是登录之后去的固定页面
      next("/login?to=" + to.path); // 拦截器去哪个界面
    }
  } else {
    // 常规页面 不需要登录就可以访问
    next(); // 直接放行
  }
});
export default router;

2. 登录之后跳转原来的页面

   try {
        // 成功调用
        const res = await getLoginApi(this.user);
        // 调用了vuex的方法存储token
        // console.log(res.data.data);
        // 存储 token  vuex 里面全局存储 token 本地存储 长久性存储 token
        this.$store.commit("setUserToken", res.data.data);
        // 登录成功或者失败都会清除 loading
        this.$toast.success("登录成功");
        // this.$router.push("/my");  // 开始登录之后直接跳转的我的界面
        // 优化之后
        // 跳转的是一个不确定的界面
        // 如何让登录界面 知道登录成功后跳转到哪里去呢？
        // 判断当前的路由i想你洗的query是否有to属性 ps：这是我在全局前置守卫里面加的（需要登录才能访问的界面才加to属性为的是能够在登录之后跳转回原来的页面）
        const toPath = this.$route.query.to;
        // console.log(toPath); // '/history'
        if (toPath) {
          this.$toast.success("特殊页面去的登录页面使用replace不会记录历史");
          // 有 toPath 说明是必须登录才能访问的页面
          this.$router.replace(toPath);
        } else {
          // 否则就是普通的页面 如 首页等
          this.$toast.success("普通页面去的登录页面直接back");
          this.$router.back();
        }
      } catch (err) {
        // 失败
        // console.log(err);
        // console.log(err.response);
        // 结构赋值
        const { status, data } = err.response;
        // 更具状态码 status 400 是手机号或者密码的格式不对
        if (status === 400) {
          this.$toast.fail(data.message);
        } else {
          this.$toast.fail("登录失败，请稍后再试");
        }
      }