笑丶日葵 2022-01-06 02:02 采纳率: 41.9%
浏览 280
已结题

为什么路由跳转打包后就不能正常跳转了?

这个是路由的代码

import Vue from "vue";
import VueRouter from "vue-router";
import login from "../components/login.vue";
import register from "../components/register.vue";
import retrievePwd from "../components/retrievePwd.vue";
import index from "../components/index.vue";
import goodsInfo from "../components/goods/goodsInfo.vue";
import goodsList from "../components/goods/goodsList.vue";
import addGoods from "../components/goods/addGoods.vue";
import baseInfo from "../components/index/baseInfo.vue";
import indexImg from "../components/index/indexImg.vue";
import orders from "../components/orders/orders.vue";
import orderInfo from "../components/orders/orderInfo.vue";
// import print from "../components/orders/print.vue";

import reserve from "../components/reserve/reserve.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/login",
        component: login,
    },
    {
        path: "/register",
        component: register,
    },
    {
        path: "/retrievePwd",
        component: retrievePwd,
    },
    {
        path: "/index",
        component: index,
        redirect: "/index/baseInfo",
        meta: { requireAuth: true },
        children: [
            { path: "goodsInfo", component: goodsInfo, meta: { requireAuth: true } },
            { path: "goodsList", component: goodsList, meta: { requireAuth: true } },
            { path: "addGoods", component: addGoods, meta: { requireAuth: true } },
            { path: "baseInfo", component: baseInfo, meta: { requireAuth: true } },
            { path: "indexImg", component: indexImg, meta: { requireAuth: true } },
            { path: "orders", component: orders, meta: { requireAuth: true } },
            // { path: "print", component: print ,meta: { requireAuth: true },},
            { path: "orderInfo", component: orderInfo, meta: { requireAuth: true } },
            { path: "reserve", component: reserve, meta: { requireAuth: true } },
        ],
    },
    {
        // 重定向
        path: "/",
        redirect: "/login",
    },
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,
});
//登陆判断
router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    if (to.meta.requireAuth) {
        // 判断该路由是否需要登录权限
        if (JSON.parse(sessionStorage.getItem("token"))) {
            //判断本地是否存在access_token
            next();
        } else {
            next("/login");
            if (to.path === "/login") {
                next();
            }
        }
    } else {
        next();
    }
    /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
    if (to.fullPath == "/login") {
        if (JSON.parse(sessionStorage.getItem("token"))) {
            next({
                path: from.fullPath,
            });
        } else {
            next();
        }
    }
});
// router.beforeEach((to, from, next) => {
//     if (
//         to.path != "/" ||
//         to.path != "/login" ||
//         to.path != "/retrievePwd" ||
//         to.path != "/register"
//     ) {
//         let token = sessionStorage.getItem("token");
//         console.log(token);
//         if (token === null || token === "") {
//             next("/login");
//             // console.log("非登录入口" + token);
//         } else {
//             // console.log("登录入口" + token);
//             next();
//         }
//     } else {
//         next();
//     }
//     next();
// });
export default router;


这个在本地运行是正常跳转的,在地址栏输入不可访问的地址是可以正常跳转到login的,但是一旦打包发布后就不可以了,只能输入根地址是可以正常访问,其他地址都是File not found. 。这是怎么回事?

  • 写回答

2条回答 默认 最新

  • zh阿飞 2022-01-06 03:53
    关注

    把路由模式 history 修改为 hash 就可以了
    mode: "history" ==> mode: "hash"

    要使用 history 模式, 需要后端配合

    https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 创建了问题 1月6日

悬赏问题

  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥15 mssql2000游标循环次数对不上
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能
  • ¥15 关于#单片机#的问题:K210 例程里面提示我iomem.h: No such file or directory
  • ¥15 LSPI算法的大问题
  • ¥15 java导出word 动态填充数据