Question

我在开发阶段有一个应用程序，我尝试添加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
});

Answer 1

在路由配置中，您需要将其更改为：

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

在位于your-app-path / routes / web.php中的网络路由中，您需要对其进行更改，如下所示：

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

使用这些基本配置，您将能够启用html5历史记录模式。现在，您可以导航到任何页面，甚至可以刷新所在的页面，而您仍将保持原样。希望对您有帮助。

Answer 2

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

尝试一下：

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

Laravel 5.7和Vue路由器模式

2 个答案: