Vue 路由器不路由到我的页面 - 它 returns 无法获取 /home

Question

我的路线数组如下所示

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。如果有帮助的话，我正在使用类星体。

Answer 1

历史模式

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

vue 路由器示例

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

仅前端路由

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

laravel web.php 例子

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

不是水疗中心？

如果这不是 spa，那么您需要使用散列模式（删除历史记录模式），并使用散列 url 语法访问 vue 路由

示例哈希 urls

https://myspa.com/#/ 为 MainLayout.vue
https://myspa.com/#/home 为 pages/Index.vue

Answer 2

尝试在您的家庭路线中使用“/home”

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

Vue 路由器不路由到我的页面 - 它 returns 无法获取 /home

Vue router does not route to my pages - It returns cannot get /home

vue.js

vue-router

quasar-framework

历史模式

仅前端路由

不是水疗中心？