Vue 路由器没有路由到我的页面 - 它返回无法获取 /home答案

【问题标题】：Vue router does not route to my pages - It returns cannot get /homeVue 路由器没有路由到我的页面 - 它返回无法获取 /home
【发布时间】：2021-05-21 02:59:13
【问题描述】：

我的路由数组是这样的

const routes = [
    {
        path: '/',
        component: () => import('layouts/MainLayout.vue'),
        children: [{ path: '', component: () => import('pages/Index.vue') }],
    },
    {
        path: 'home',
        component: () => import('pages/Home.vue'),
    },

    // Always leave this as last one,
    // but you can also remove it
    {
        path: '*',
        component: () => import('pages/Error404.vue'),
    },
];

但是当我导航到家时，它显示cannot GET /home。顺便说一句，我正在使用类星体，如果有帮助的话。

【问题讨论】：

是水疗中心吗？如果是这样，您可以分享您的后端代码吗？，，如果不是，您能告诉我如何路由吗？你是在 url 字段中传递它吗？
@HijenHEK 是的，它在 SPA 中。我没有后端，只有静态前端。我使用 quasar cli 创建它
检查我的答案，，它是历史模式

标签： vue.js vue-router quasar-framework

【解决方案1】：

历史模式

首先确保您使用的是history mode，这样您就可以直接访问 /home 之类的路由。如果未激活历史模式，您将有一个 # 这就是 vuejs 中默认的 hash_mode

vue 路由器示例

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

仅前端路由

其次，如果 spa 是从 laravel 之类的路由加载的，请确保您的后端不会将用户重定向到根 / 以外的任何其他页面，并且所有路由都应该只处理您的前端。

laravel web.php 示例

Route::get('{path}', function () {
    return view('app');
})->where('path', '.*');

不是水疗中心？

如果这不是一个 spa，那么你需要使用 hash 模式（删除历史模式），并使用 hashed url 语法访问 vue 路由

示例哈希网址

https://myspa.com/#/ MainLayout.vue
https://myspa.com/#/home 页面/Index.vue

【讨论】：

【解决方案2】：

尝试在您的主路由中使用“/home”

{
    path: '/home',
    component: () => import('pages/Home.vue'),
},

【讨论】：