VueRouter 在非历史模式下省略 # 之前的正斜杠答案

【问题标题】：VueRouter omitting the forward slash before the # in non-history modeVueRouter 在非历史模式下省略 # 之前的正斜杠
【发布时间】：2017-03-08 16:28:15
【问题描述】：

我正在尝试在我的 Laravel 应用程序中使用 VueRouter 2.2.1，由于某种原因，我的 URL 的 （虽然有效） 显示# 奇怪的符号

http://myapp.dev/admin#/

代替

http://myapp.dev/admin/#/

正如我通常所期望的那样......

这是我的 VueRouter 配置

const Router = new VueRouter({
    routes: [
        {
            path: '/',
            component: App,
            children: [
                {
                    path: 'dashboard',
                    name: 'dashboard',
                    component: Dashboard
                }
            ]
        }
    ]
});

在 PHP 方面，我只是为 Application

的 /admin 部分定义 catch all 路由

    // Catch-all Route, sends GET requests to VueRouter //
    Route::get('{all?}', function() {
        return view('index');
    })->where(['all' => '(.*)'])->name('catchall');

像这样，我做错了什么吗？它正在工作，但它只是让我有点困扰，# 只是漂浮在那里。

【问题讨论】：

标签： vuejs2 laravel-5.4 vue-router

【解决方案1】：

您必须启用历史模式，如 here 所述，我在您的 vue-router 配置中没有看到。

const Router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: App,
            children: [
                {
                    path: 'dashboard',
                    name: 'dashboard',
                    component: Dashboard
                }
            ]
        }
    ]
});

【讨论】：

i HAVE 设置历史模式？我宁愿不使用它，我之前使用过 Angular，它就像我所说的 /#/ 一样工作，然后无论你的 URI 是什么，在 VueJS 中这是不可能的吗？

【解决方案2】：

您必须在服务器端执行此操作，只需将路由重定向到以'/' 结尾的路由

在 laravel 中：

Route::get('{all?}', function() {
    return view('index');
})->where(['all' => '^/admin\/$'])->name('catchall');

现在只需访问/admin/#/

【讨论】：