vue项目登录和未登录状态使用相同路径路由不同页面

需求：

1、需要做游客模式（非登录模式）和登录模式的页面，两种模式页面样式相同，接口不同

2、两种模式的路由路径相同

 

实现方法：

1、由于两种模式接口不同，所以准备分成两个模块，不同的vue文件编写

 

2、准备两套路由，对应不同模块的vue文件

 

3、在router的index.js文件中，通过是否又token判断用户是否登录，若登录，使用非游客模式路由，否则使用游客模式路由

Vue.use(VueRouter);
const createRouter = (v) =>
  new VueRouter({
    // mode: 'history',
    base:
      process.env.NODE_ENV === "production"
        ? "/" + process.env.VUE_APP_PROJECTNAME
        : "",
    routes: [
      {
        path: "*",
        name: "not_found",
        component: () => import("@/views/pc/components/notFound.vue"),
        meta: {
          unrequireLogin: true,
        },
      }, // 404
      {
        path: "/",
        name: "index",
        component: () => import("@/views/pc/components/default.vue"),
        meta: {
          unrequireLogin: true,
        },
        redirect: {
          name: "home",
        },
        children: v ? [
          ...routerVisitorCenter,
          routeAppCenter
        ] : [
          ...routeResCenter,
          routeAppCenter
        ],
      },
    ],
  });

let uToken = JSON.parse(localStorage.getItem("token"));
const router = uToken ? createRouter() : createRouter("tourist");