Vue路由器不路由到我的页面-它返回cannot get/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。如果有帮助的话，我正在使用类星体btw。

Answer 1

历史模式

首先确保您使用的是历史记录模式，这样您就可以直接访问/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，那么您需要使用哈希模式(删除历史模式(，并使用哈希url语法访问vue路由

示例散列URL

• 主布局的https://myspa.com/#/.vue
• 页面/索引的https://myspa.com/#/home.vue

Answer 2

尝试在您的家乡路线中使用'/home'

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