Laravel 5.7 和 Vue 路由模式

Posted 2023-02-22

【中文标题】Laravel 5.7 和 Vue 路由模式

【英文标题】：Laravel 5.7 and Vue router mode

【发布时间】：2019-02-27 04:47:44

【问题描述】：

我有一个处于开发阶段的应用程序，我尝试添加 Vuejs。现在我想删除 URL 中的哈希 #。在 vue-router 实例中，我添加了路由并尝试添加

<code>mode:history</code>

但它不起作用。关于如何解决这个问题的任何想法？谢谢

这是我的路线

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
import Appearance from './components/Appearance/Appearance.vue'
Vue.use(VueRouter)

let routes =  [
    path: '/appearance', component: Appearance
]

const router = new VueRouter([
    routes

])


Vue.component('Sidebar', require('./components/_partials/Sidebar.vue'));


const app = new Vue(
   el: '#app',
   router
);

【问题讨论】：

请分享代码。 web.php & routes.js

【参考方案1】：

在路由器配置中添加 hashbang 和 history，这将删除 URL 中的 #

试试这个：

const router = new VueRouter(
  hashbang: false, // Add this line
  history: true, // Add this line
  routes
)

【讨论】：

AddWeb：多年来我们进行了一些对话，其中我指出这里重视简洁，不鼓励和删除样板签名和闲谈材料。一位版主同意这一点，并支持我对您的一个问题所做的修改，您至少在一年内都避免添加此内容。

请继续克制 - 每个人都希望他们的材料有所帮助，没有人希望他们的材料没有帮助。这是多余的，这不是聊天室。谢谢！

【参考方案2】：

在路由配置中你需要把它改成这样：

const router = new VueRouter([
    mode: 'history', // Add this line
    routes
]);

在位于 your-app-path/routes/web.php 的网络路由中，您需要将其更改为：

Route::get('/any', 'AppearanceController@index')->where('any', '.*');

通过这些基本配置，您将能够启用 html5 历史模式。现在您可以导航到任何页面，甚至可以刷新您所在的页面，并且您仍将处于您所在的位置。希望对您有所帮助。