मैं vue.js v1.0, vue-router v0.7 और वेबपैक का उपयोग कर एक वेब एप्लिकेशन बना रहा हूं। मैं Single File Component पैटर्न का पालन कर रहा हूं और प्रत्येक पृष्ठ के लिए अलग-अलग घटक हैं।Vue.js: विभिन्न मार्गों पर पृष्ठ शीर्षक असाइन करना
मुझे नहीं पता कि मैं वेब एप पृष्ठों के माध्यम से नेविगेट करते समय अलग-अलग रूटिंग (या शायद अलग-अलग घटकों) में पृष्ठ शीर्षक कैसे बदल सकता हूं। मैं ब्राउज़र इतिहास में पृष्ठ शीर्षक भी उपलब्ध होना चाहता हूं।
मैं भी कुछ दिन पहले ही समस्या थी, और मेरे मार्ग घटक परिभाषा इस प्रकार मैं समाधान किया गया:
export default {
created: function() {
window.document.title = "Page Title for this route"
...
},
...
}
वास्तव में यह कर का सही तरीका नहीं है यही कारण है कि। कारण: मैं एक बड़ी धारणा बना रहा हूं कि मार्ग घटक हर बार एक नए मार्ग में बदलने पर बनाया जाता है। यह अब के लिए vue-router में सच है, लेकिन भविष्य में बदल सकता है।
मैंने पहले कोणीय 1.4 में ui-router का उपयोग कर, जो, मार्ग घटकों स्मृति (चिपचिपा राज्यों) में रहने के लिए अनुमति देता है ताकि मार्ग परिवर्तन तात्कालिक अगली बार है था। यदि vue-router कभी चिपचिपा राज्यों जैसा कुछ लागू करता है, तो created हुक में शीर्षक सेट करने की मेरी उपरोक्त विधि विफल हो जाएगी।
लेकिन जब तक ऐसा नहीं होता है, तो आप इस समाधान का उपयोग कर सकते हैं।
मेरी पहले समाधान यहां पोस्ट के अलावा, वहाँ एक दूसरी विधि है कि मैं अनुसंधान के एक बिट के बाद पाया है: का उपयोग Navigation Guards
मेरे पिछले जवाब में के रूप में विस्तृत, यहाँ है समस्या: vue-router शुरू हो सकता है पहली बार बनाए जाने के बाद मार्ग घटकों का पुन: उपयोग करना। मार्ग-बाहर निकलने पर इन घटकों को नष्ट करने की वास्तव में कोई आवश्यकता नहीं है, और बाद में मार्ग-प्रविष्टि पर फिर से बनाएं। इसलिए created मेरे पिछले समाधान में हुक उसी मार्ग पर आने वाली यात्राओं पर आग नहीं लगा सकता है। इसलिए हमारी खिड़की का शीर्षक अपेक्षित काम नहीं कर सकता है।
उस समस्या को दूर करने के लिए, हम विंडो शीर्षक को मार्ग-परिवर्तन ईवेंट पर सेट कर सकते हैं। राउटर इंस्टेंस में afterEach हुक है जिसे मार्ग परिवर्तन के बाद बुलाया जाता है। यह के रूप में नीचे दिए गए विवरण विंडो शीर्षक सेट करने के लिए इस्तेमाल किया जा सकता:
// Let's say this is your router instance, with all "Named Routes"
const ROUTER_INSTANCE = new VueRouter({
mode: "history",
routes: [
{ path: "/", name: "HomeComponentName", component: HomeComponent },
{ path: "/about", name: "AboutComponentName", component: AboutComponent },
{ path: "*", name: "RouteErrorName", component: RouteError }
]
})
// Assign page titles for each of the "named routes"
// Reason: This allows us to have short named routes, with descriptive title
const PAGE_TITLE = {
"HomeComponentName": "Your Dashboard",
"AboutComponentName": "About Us Page",
"RouteErrorName": "Error: Page not found"
}
ROUTER_INSTANCE.afterEach((toRoute, fromRoute) => {
window.document.title = PAGE_TITLE[toRoute.name]
console.log(toRoute) // this lets you check what else is available to you here
})
आप समान मार्गों के बीच नेविगेट कर रहे हैं, तो यह अभी भी आपकी मदद नहीं कर सकता है, जैसे "/ उपयोगकर्ता/foo" के लिए "/ उपयोगकर्ता/बार"। यदि आप टाइटलबार में उपयोगकर्ता नाम चाहते हैं या कुछ गतिशील पृष्ठ विशिष्ट जानकारी चाहते हैं, तो में विस्तृत पैराम परिवर्तन पर प्रतिक्रिया दें। डॉक्स के आधार पर हमने घटक में watch उपयोग करने में सक्षम इस प्रकार होना चाहिए:
watch: {
'$route' (toRoute, fromRoute) {
window.document.title = "some page title"
}
}
आशा है कि यह मदद करता है!
मुझे एक समाधान मिला है और इसे मेरे projects पर इस्तेमाल किया गया है।
पहले एक निर्देश बनाएं।
Vue.directive('title', {
inserted: (el, binding) => document.title = binding.value,
update: (el, binding) => document.title = binding.value
})
मान लीजिए, हम 'MyComponent.vue' फाइल पर काम कर रहे हैं।
फिर router-view घटक पर उस निर्देश का उपयोग करें।
<router-view v-title="title" ></router-view>
export default {
data(){
return {
title: 'This will be the title'
}
}
}
यह तब भी काम करता है जब घटक अद्यतन किया जाता है या पृष्ठ को पुनः लोड किया जाता है।
मेरे लिए बहुत अच्छा काम किया !!