लार्वेल होमस्टेड

Question

में Vue.js का उपयोग करते समय यूआरएल से # हैश हटाएं। मेरे पास होमस्टेड में एक लार्वा 5.2 सेटअप चल रहा है और एसपीए बनाने के लिए Vue.js राउटर का उपयोग कर रहा है। मैं पूरी तरह से यूआरएल जो मैं जानता हूँ कि क्या किया जा सकता से #hash दूर करने के लिए कोशिश कर रहा हूँ, लेकिन मैं हो रही त्रुटियों रखें:

मैं Homestead में मेरी vhosts फाइल करने के लिए rewrite ^(.+)$ /index.html last; जोड़ दिया है:

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; 

    ... 

} 

जब मैं एक पृष्ठ को पुनरारंभ करता हूं और खोलता हूं मुझे 500 Internal Server Error मिलता है।

क्या लैरवेल में मार्गों में मुझे कुछ भी जोड़ने की ज़रूरत है?

var router = new VueRouter({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: "active" 
}) 

मैं इसे #hash बिना काम (या संशोधित मेजबान फ़ाइल) जब चारों ओर नेविगेट मिलता है, लेकिन विफल रहता है जब मैं एक पृष्ठ पुनः लोड कर सकते हैं।

Answer 1

मैं मैट स्टौफ़्फ़ेर के डेमो एप्लिकेशन के माध्यम से, एक समाधान खोजने के लिए प्रबंधित किया है: http://vuejs.github.io/vue-router/en/api/properties.html

तो अपने नए कोड जैसा होगा। सबसे पहले, vhosts फ़ाइल को अपडेट करने की आवश्यकता नहीं है।

Route::get('/{vue?}', 'AppController@spa')->where('vue', '[\/\w\.-]*'); 

और निश्चित रूप से आरंभ तो की तरह Vue.js रूटर:

const router = new VueRouter({ 
    history: true, 
    hashbang: false, 
    linkActiveClass: 'active' 
}) 
router.mode = 'html5' 

रेफरी: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

Answer 2

आप html5 आरई के लिए रूटर मोड सेट करने की जरूरत है:

var router = new VueRouter({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: "active" 
}) 
router.mode = 'html5' 

Answer 3

Laravel रूटर बस को routes.php में एसपीए/Vue.js मार्ग अद्यतन करने की आवश्यकता

Route::any('{all}', function() { 
    return view('welcome');})->where(['all' => '.*']); 

Vue रूटर

012,

export default new Router({ 
    routes: [ 
     { path: '/', name: 'Home', component: HomeView }, 
     { path: '/category', name: 'Category', component: CategoryView }, 
     { path: '/topic', name: 'Topci', component: TopicView } 
    ], 
    mode: 'history' 
}) 

Answer 4

आप Vue रूटर और Laravel रूटर निम्नलिखित परिवर्तन करके अच्छी तरह से एक साथ काम कर सकते हैं:

अंत में अपने routes/web.php की जोड़ने अगली पंक्तियों में:

Route::get('{path}', function() { 
    return view('your-vuejs-main-blade'); 
})->where('path', '.*'); 

आप की जरूरत है फ़ाइल के अंत में इसे जोड़ें क्योंकि आपको ठीक से काम करने के लिए पहले घोषित लार्वा मार्गों को संरक्षित करने की आवश्यकता है और 404 पेज या वाउ-राउटर के पथों द्वारा ओवरराइट नहीं किया जाना चाहिए।

अपने Vue रूटर के config में निम्नलिखित का उपयोग करें:

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 

हालांकि, जब laravel और Vue रूटर के बीच नेविगेट करने के लिए, आप एक laravel पेज आप का उपयोग करना चाहिए करने के लिए छोड़ रहा है कि Vue-रूटर के पेज को ध्यान में रखने की जरूरत है एक window.location.href कोड, <a> टैग या कुछ प्रकार के programmatic navigation ताकि वेयू-राउटर के उदाहरण से पूरी तरह बाहर निकलने के लिए।

Laravel 5.5.23, Vue 2.5.9, Vue-रूटर 3.0.1