在 Laravel Homestead 中使用 Vue.js 时从 URL 中删除 # 哈希
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35041887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove the # hash from URL when using Vue.js in Laravel Homestead
提问by Hyman Barham
I have a Laravel 5.2 setup running in Homestead and using Vue.js router to build an SPA. I'm trying to completely remove the #hash from the URL which I know can be done, but I keep getting errors:
我有一个 Laravel 5.2 设置在 Homestead 中运行并使用 Vue.js 路由器来构建 SPA。我正在尝试从我知道可以完成的 URL 中完全删除 #hash，但我不断收到错误消息：
I've added rewrite ^(.+)$ /index.html last;to my vhosts file in Homestead:
我已经rewrite ^(.+)$ /index.html last;在 Homestead 的 vhosts 文件中添加了：
server {
listen 80;
listen 443 ssl;
server_name app.myproject.dev;
root "/home/vagrant/Code/vibecast/app.myproject.com/public";
rewrite ^(.+)$ /index.html last;
index index.html index.htm index.php;
charset utf-8;
...
}
When I restart and open a page I get a 500 Internal Server Error.
当我重新启动并打开一个页面时，我得到一个500 Internal Server Error.
Is there anything I need added to routes in Laravel?
我需要在 Laravel 的路由中添加什么吗？
var router = new VueRouter({
hashbang: false,
history: true,
linkActiveClass: "active"
})
I can get it working without the #hash (or the modified hosts file) when navigating around, but fails when I reload a page.
导航时我可以在没有#hash（或修改后的主机文件）的情况下使其工作，但在我重新加载页面时失败。
回答by Hyman Barham
I've managed to find a solution, via Matt Stauffer's demo app. First, no need to update vhosts file. Just need to update the SPA/Vue.js route in routes.phpto:
我设法通过 Matt Stauffer 的演示应用程序找到了解决方案。首先，无需更新 vhosts 文件。只需要将 SPA/Vue.js 路由更新routes.php为：
Route::get('/{vue?}', 'AppController@spa')->where('vue', '[\/\w\.-]*');
And of course initialise the Vue.js router like so:
当然，像这样初始化 Vue.js 路由器：
const router = new VueRouter({
history: true,
hashbang: false,
linkActiveClass: 'active'
})
router.mode = 'html5'
Ref: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9
参考：https: //github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9
回答by aki
You can make Vue Router and Laravel Router work together nicely by making the following changes:
通过进行以下更改，您可以使 Vue Router 和 Laravel Router 很好地协同工作：
At the endof your routes/web.phpadd the next lines:
在你的末尾routes/web.php添加下一行：
Route::get('{path}', function() {
return view('your-vuejs-main-blade');
})->where('path', '.*');
You need to add this at the end of file because you need to preserve the previously declared laravel routes in order to work properly and not be overwritten by the 404 page or vue-router's paths.
您需要在文件末尾添加它，因为您需要保留之前声明的 Laravel 路由才能正常工作并且不会被 404 页面或 vue-router 的路径覆盖。
In your Vue router's config use the following:
在 Vue 路由器的配置中使用以下内容：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = new Router({
mode: 'history', //removes # (hashtag) from url
base: '/',
fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState
routes: [
{ path: '*', require('../components/pages/NotFound.vue') },
//... + all your other paths here
]
})
export default router
However, when navigating between laravel and vue-router, you need to keep in mind that leaving vue-router's page to a laravel page you must use a window.location.hrefcode, an <a>tag or some sort of programmatic navigationin order to fully exit Vue-router's instance.
但是，在 laravel 和 vue-router 之间导航时，您需要记住，将 vue-router 的页面留在 laravel 页面上，您必须使用window.location.href代码、<a>标签或某种编程导航才能完全退出 Vue-router 的实例.
Tested this with Laravel 5.5.23, Vue 2.5.9, Vue-Router 3.0.1
使用 Laravel 5.5.23、Vue 2.5.9、Vue-Router 3.0.1 对此进行了测试
回答by Dan Gamble
You need to set the router mode to html5RE: http://vuejs.github.io/vue-router/en/api/properties.html
您需要将路由器模式设置为html5RE：http: //vuejs.github.io/vue-router/en/api/properties.html
So your new code would be like:
所以你的新代码会是这样的：
var router = new VueRouter({
hashbang: false,
history: true,
linkActiveClass: "active"
})
router.mode = 'html5'
回答by Hoàng Lê
Laravel router
Laravel 路由器
Route::any('{all}', function () {
return view('welcome');})->where(['all' => '.*']);
Vue-router
Vue路由器
export default new Router({
routes: [
{ path: '/', name: 'Home', component: HomeView },
{ path: '/category', name: 'Category', component: CategoryView },
{ path: '/topic', name: 'Topci', component: TopicView }
],
mode: 'history'
})
