vue-router beforeEach 遭遇奇怪的重叠和错误导向

Question

问题描述

用户未登录状态，访问http://localhost:23001/任何URI时，会被导向去http://localhost:23001/任何URI#/login，此时在beforeEach里打印to.name为home。然后
比如：

• http://localhost:23001/register会变成http://localhost:23001/register#/login
• • http://localhost:23001/reset-password会变成http://localhost:23001/reset-password#/login

问题出现的环境背景及自己尝试过哪些方法

利用vue-router的beforeEach这个全局钩子，设置导航保护，将未登录用户导向去登录页。

• 用户登录时，访问主页http://localhost:23001/，会被导向去http://localhost:23001/#/
• 用户未登录时，访问主页http://localhost:23001/，会被导向去http://localhost:23001/#/login

相关代码

const no_auth_required_pages = ['login', 'register', 'reset-password'];
const routes_config = [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta:{
            requiresAuth: true
        }
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    },
    {
        path: '/register',
        name: 'register',
        component: Register
    },
    {
        path: '/reset-password',
        name: 'reset-password',
        component: ResetPassword
    }
];

const router = new VueRouter({
    routes: routes_config
});

router.beforeEach(function (to, from, next) {
    if (to.meta.authRequired) {
        if (localStorage.getItem('token')) {
            next();
        } else {
            if (no_auth_required_pages.indexOf(to.name) === -1) {
                next({path: '/login'});
            } else {
                next();
            }
        }
    } else {
        next();
    }
});

你期待的结果是什么？实际看到的错误信息又是什么？

• 想知道URL里面那个#的作用
• 为什么转向的时候不会把hash前面的路径名称覆盖，而是在#/后面直接添加

Answer 1

URL里#的作用，涉及前端路由的原理。
在没有#并且没有使用H5historyApi改变浏览器地址的情况下，浏览器会向地址栏地址发送一个get请求获取页面。#后的串为URL的hash部分，这部分改变不会触发这个get请求，而在前端监听这部分变化跳转不同的页面，这就是前端路由原理。

可以使用history模式去除#，因为H5的historyApi同样可以避免get请求，但是呢前端不知道从哪个地方开始的地址归自己解析，所以history模式就要在前端配置一个baseUrl。比如http:/a.com/x/y，可能y开始才是前端解析的部分，所以baseUrl要设置为/x。

至于你说的第二个问题：
为什么转向的时候不会把hash前面的路径名称覆盖，而是在#/后面直接添加。其实答案已经在上面了，就是hash模式认为 #号后面的路径才归前端路由来管，#前面的前端路由并不能插手。