Vue-Router 不在单页应用程序中重新路由（Vue/Laravel）
Posted
技术标签:
【中文标题】Vue-Router 不在单页应用程序中重新路由（Vue/Laravel）【英文标题】：Vue-Router not rerouting in Single Page Application (Vue/Laravel) 【发布时间】：2021-11-12 22:33:20 【问题描述】：我正在尝试让 vue-router 在 Vue.js/Laravel 项目中工作。我有以下简单的页面：
主页：
关于页面（单页向下滚动）：
由这些文件制成：
welcome.blade.php：
<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap"></script>
<title>title</title>
</head>
<body id="body">
<div id="app">
<app></app>
</div>
</body>
<script src=" mix('js/app.js') "></script>
</html>
app.vue：
<template>
<div class="container">
<main>
<home></home>
<about></about>
</main>
</div>
</template>
<script>
import About from "./about"
import Home from "./home";
export default
name: "app",
components:
About,
Home,
</script>
<style lang="scss">
</style>
home.vue：
<template>
<section class="home" style="background-color: yellow; height: 100vh">
<h1>Home Page</h1>
</section>
</template>
<script>
export default
name: "home"
</script>
<style scoped lang="scss">
</style>
about.vue:
<template>
<section class="about" style="background-color: green; height: 100vh">
<h2>About Page</h2>
</section>
</template>
<script>
export default
name: "about"
</script>
<style scoped lang="scss">
</style>
web.php:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function ()
return view('welcome');
);
app.js：
require('./bootstrap')
import Vue from "vue"
import App from "../vue/app"
import router from "./router";
const app = new Vue(
el: "#app",
components: App ,
router
)
router.js：
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../vue/home";
import About from "../vue/about";
Vue.use(VueRouter);
export default new VueRouter(
mode: "history",
routes: [
path: "/", component: Home,
path: "/about", component: About
]
);
现在，如果我像这样将 <router-view></router-view> 添加到app.vue：
<template>
<div class="container">
<main>
<home></home>
<about></about>
</main>
</div>
<router-view></router-view>
</template>
网站根本不加载，浏览器控制台没有显示错误：
路径localhost:3000/about 显示404 Error：
我做错了什么？
【问题讨论】：
【参考方案1】：您是否尝试在路由器中定义基址：
const router = new VueRouter(
mode: 'history',
base: process.env.BASE_URL,
routes,
);
export default router;
然后在应用中：
<template>
<div class="container">
<nav>
<router-link
to="/"
tag="a"
>Home</router-link>
<router-link
to="/about"
tag="a"
>About</router-link>
</nav>
</div>
<router-view></router-view>
</template>
【讨论】：
我尝试实施您的解决方案，但结果没有改变。浏览器窗口保持空白。 嘿伙计，对不起:(也许你有你的项目的回购，所以我可以克隆它来尝试解决你的问题？【参考方案2】：在 Laravel 中，您需要一个包罗万象的路由，将所有路由重定向到您的 Vue 项目：
创建一个名为 VueController 的新控制器，然后将 Laravel 中的所有路由指向它：
Route::get('/any', 'VueController@index')->where('any', '.*');
然后在您的VueController 中返回您的welcome 刀片：
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class VueController extends Controller
public function index()
return view('welcome');
【讨论】：
以上是关于Vue-Router 不在单页应用程序中重新路由（Vue/Laravel）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Vue.js中的路由vue-router创建单页应用