Url #!से हैशबैंग कैसे हटाएं ?
मैं Vue रूटर दस्तावेज में अक्षम hashbang करने का विकल्प (पाया http://vuejs.github.io/vue-router/en/options.html ) लेकिन इस विकल्प को हटा #!और बस डाल#
क्या कोई तरीका है स्वच्छ url?
उदाहरण:
नहीं: #!/home
परंतु: /home
जवाबों:
आप वास्तव में सिर्फ सेट करना चाहते हैं modeके लिए 'history'।
const router = new VueRouter({
mode: 'history'
})
सुनिश्चित करें कि इन लिंक को संभालने के लिए आपका सर्वर कॉन्फ़िगर किया गया है। https://router.vuejs.org/guide/essentials/history-mode.html
{history: true}पहले पृष्ठ के लिए काम जोड़ रहा था , लेकिन बाकी मार्ग विफल रहे।
Vue.js 2 के लिए निम्नलिखित का उपयोग करें:
const router = new VueRouter({
mode: 'history'
})
हैश एक डिफॉल्ट वाउ-राउटर मोड सेटिंग है, यह सेट है क्योंकि हैश के साथ, एप्लिकेशन को url की सेवा के लिए सर्वर से कनेक्ट करने की आवश्यकता नहीं है। इसे बदलने के लिए आपको अपने सर्वर को कॉन्फ़िगर करना चाहिए और मोड को एचटीएमएल 5 हिस्ट्री एपीआई मोड पर सेट करना चाहिए।
सर्वर कॉन्फ़िगरेशन के लिए यह Apache, Nginx और Node.js सर्वर सेट करने में आपकी सहायता करने के लिए लिंक है:
https://router.vuejs.org/guide/essentials/history-mode.html
फिर आपको यह सुनिश्चित करना चाहिए, कि vue राऊटर मोड निम्नलिखित की तरह सेट है:
vue- राउटर संस्करण 2.x
const router = new VueRouter({
mode: 'history',
routes: [...]
})
स्पष्ट होने के लिए, ये सभी वी-राउटर मोड हैं जिन्हें आप चुन सकते हैं: "हैश" | "इतिहास" | "सार"।
Vuejs 2.5 और vue-रूटर 3.0 के लिए ऊपर कुछ भी मेरे लिए काम नहीं किया, हालांकि थोड़ा सा खेलने के बाद निम्नलिखित काम करने लगता है:
export default new Router({
mode: 'history',
hash: false,
routes: [
...
,
{ path: '*', redirect: '/' }, // catch all use case
],
})
ध्यान दें कि आपको कैच-ऑल पाथ जोड़ना होगा।
window.router = new VueRouter({
hashbang: false,
//abstract: true,
history: true,
mode: 'html5',
linkActiveClass: 'active',
transitionOnLoad: true,
root: '/'
});
और सर्वर ठीक से कॉन्फ़िगर किया गया है अपाचे में आपको यूआरएल को फिर से लिखना चाहिए
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
डॉक्स का हवाला देते हुए।
वीयू-राउटर के लिए डिफ़ॉल्ट मोड हैश मोड - यह URL हैश का उपयोग एक पूर्ण URL को अनुकरण करने के लिए करता है ताकि URL के बदलने पर पृष्ठ पुनः लोड न हो।
हैश से छुटकारा पाने के लिए, हम राउटर के इतिहास मोड का उपयोग कर सकते हैं, जो एक पृष्ठ पुनः लोड किए बिना URL नेविगेशन प्राप्त करने के लिए history.pushState API का लाभ उठाता है:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
इतिहास मोड का उपयोग करते समय, URL "सामान्य" दिखाई देगा, उदाहरण के लिए http://oursite.com/user/id । सुंदर!
यहाँ एक समस्या आती है, हालाँकि: चूंकि हमारा ऐप एक सिंगल पेज क्लाइंट साइड ऐप है, एक उचित सर्वर कॉन्फ़िगरेशन के बिना, उपयोगकर्ताओं को अपने ब्राउज़र में सीधे http://oursite.com/user/id का उपयोग करने पर 404 त्रुटि मिलेगी । अब वह बदसूरत है।
चिंता न करने के लिए: समस्या को ठीक करने के लिए, आपको बस अपने सर्वर पर एक सरल कैच-सभी फ़ॉलबैक मार्ग जोड़ना होगा। यदि URL किसी स्थिर संपत्ति से मेल नहीं खाता है, तो उसे उसी index.html पृष्ठ की सेवा करनी चाहिए, जिसमें आपका ऐप रहता है। सुंदर, फिर से!
vue-routerका उपयोग करता है hash-mode, सरल शब्दों में यह कुछ है कि आप सामान्य रूप से इस तरह की एक achor टैग से उम्मीद होती है।
<a href="#some_section">link<a>हैश को गायब करने के लिए
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
] // Routes Array
const router = new VueRouter({
mode: 'history', // Add this line
routes
})Warning: यदि आपके पास ठीक से कॉन्फ़िगर किया गया सर्वर नहीं है या आप क्लाइंट-साइड एसपीए उपयोगकर्ता का उपयोग कर रहे हैं, 404 Error
तो हो सकता है कि वे https://website.com/posts/3अपने ब्राउज़र से सीधे पहुंचने का प्रयास करें ।
Vue राउटर डॉक्स
वीयू-राउटर के लिए डिफ़ॉल्ट मोड हैश मोड - यह URL हैश का उपयोग एक पूर्ण URL को अनुकरण करने के लिए करता है ताकि URL के बदलने पर पृष्ठ पुनः लोड न हो। हैश से छुटकारा पाने के लिए, हम राउटर के इतिहास मोड का उपयोग कर सकते हैं, जो history.pushStateएक पृष्ठ पुनः उपयोग के बिना URL नेविगेशन प्राप्त करने के लिए एपीआई का लाभ उठाता है :
import {routes} from './routes'; //import the routes from routes.js
const router = new VueRouter({
routes,
mode: "history",
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
import ComponentName from './ComponentName';
export const routes = [
{
path:'/your-path'
component:ComponentName
}
]
const router = new VueRouter({
mode: 'history',
routes: [...]
})
और अगर आप AWS का उपयोग कर रहे हैं, तो सर्वर को कॉन्फ़िगर करने के तरीके के बारे में इस लेख की जाँच करें: Vue रूटर का इतिहास मोड और AWS प्रवर्धन
const router = new VueRouter({ history: true })