vue.js पृष्ठ संक्रमण vue-राउटर

Question

के साथ फीका प्रभाव फीड प्रभाव vue-राउटर परिभाषित पृष्ठों (घटकों) के बीच एक फीड प्रभाव पृष्ठ संक्रमण कैसे प्राप्त करें?

Answer 1

लपेटें <router-view></router-view><transition name="fade"></transition> साथ और जोड़ने के इन शैलियों:

.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 

विस्तृत जवाब

मान लिया जाये कि आप के साथ Vue-CLI, जैसे आपके आवेदन बनाया है:

vue init webpack fadetransition 
cd fadetransition 
npm install 

स्थापित करें राउटर:

npm i vue-router 

आप Vue-CLI उपयोग करके आपके एप्लिकेशन को विकसित नहीं कर रहे हैं, Vue रूटर मानक तरीका जोड़ना सुनिश्चित करें:

<script src="/path/to/vue.js"></script> 
<script src="/path/to/vue-router.js"></script> 

आप उपयोग कर सकते हैं जैसे: https://unpkg.com/vue-router/dist/vue-router.js

CLI पैदा कर दी है एक आपके लिए रीढ़ की हड्डी आवेदन, जिसमें आप घटक जोड़ सकते हैं।

1) बनाएं पृष्ठ के घटकों

Vue में, घटकों (UI तत्व) नेस्ट जा सकता है। आपके ऐप में एक पृष्ठ नियमित व्यू घटक के साथ बनाया जा सकता है जिसे उस पृष्ठ के अन्य घटकों के रूट के रूप में माना जाता है।

src/ पर जाएं और pages/ निर्देशिका बनाएं। ये पृष्ठ-रूट घटक (व्यक्तिगत पृष्ठ) इस निर्देशिका में रखे जाएंगे, जबकि वास्तविक पृष्ठों में उपयोग किए जाने वाले अन्य घटकों को तैयार किए गए components/ निर्देशिका में रखा जा सकता है।

स्टार्टर्स के लिए src/pages/Page1.vue और src/pages/Page2.vue नामक फ़ाइलों में दो पृष्ठ बनाएं। उनकी सामग्री (संपादित करें पृष्ठ संख्या क्रमशः) हो जाएगा:

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

2) सेटअप मार्ग

संपादित उत्पन्न src/main.js जोड़ने की आवश्यकता आयात:

import VueRouter from 'vue-router' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

एक वैश्विक रूटर उपयोग करें:

Vue.use(VueRouter) 

एक रूटर सेटअप जोड़ें:

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

पिछले मार्ग अभी प्रारंभिक पथ पुनर्निर्देश /page1 को /। एप्लिकेशन दीक्षा संपादित करें:

new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

पूरे src/main.js उदाहरण जवाब के अंत में है।

3) एक रूटर दृश्य

रूटिंग अब तक की स्थापना की है, बस एक जगह है जहाँ पृष्ठ के घटकों रूटर याद आ रही है के अनुसार रेंडर किया जाएगा जोड़ें। यह टेम्पलेट्स में <router-view></router-view> कहीं भी रखकर किया जाता है, आप इसे src/App.vue के <template> टैग में रखना चाहते हैं।

संपूर्ण src/App.vue उदाहरण उत्तर के अंत में है।

4) फीका संक्रमण प्रभाव पृष्ठ के घटकों

लपेटें के बीच <router-view></router-view> एक <transition name="fade"> तत्व के साथ, उदाहरण के लिए जोड़ें:

<template> 
    <div id="app"> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

Vue यहाँ काम करेगा: यह बना सकते हैं और उचित सीएसएस डाल देगा प्रभाव की अवधि के माध्यम से निर्दिष्ट नाम से शुरू होने वाली कक्षाएं, उदाहरण: .fade-enter-active। अब App.vue के अनुभाग में प्रभाव परिभाषित करें:

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

यही है। यदि आप अब ऐप चलाते हैं, उदा। npm run dev के साथ, यह स्वचालित रूप से फीड-इन प्रभाव के साथ पृष्ठ 1 प्रदर्शित करेगा। यदि आप यूआरएल को/पेज 2 पर फिर से लिखते हैं, तो यह पृष्ठों को फीड-आउट और फीड-इन प्रभावों से बदल देगा।

अधिक जानकारी के लिए routing और transitions पर प्रलेखन देखें।

5) वैकल्पिक: पृष्ठों के लिंक जोड़ें।

आप <router-link> घटक के साथ विशेष रूप से पृष्ठों के लिंक जोड़ सकते हैं, जैसे:

<router-link to="/page1">Page 1</router-link> 
<router-link to="/page2">Page 2</router-link> 

यह स्वचालित रूप से लिंक मामले वे सक्रिय हैं में एक router-link-active वर्ग देता है, लेकिन अगर आप कर रहे हैं आप भी कस्टम कक्षाओं निर्दिष्ट कर सकते हैं उदाहरण का उपयोग कर बूटस्ट्रैप:

<router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
<router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 

संदर्भ के लिए फ़ाइलें

src/main.js:

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import VueRouter from 'vue-router' 

import App from './App' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

Vue.use(VueRouter) 

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

src/App.vue:

<template> 
    <div id="app"> 
    <router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
    <router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app' 
} 
</script> 

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

src/पृष्ठों/पृष्ठ 1। vue:

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

src/पृष्ठों/Page2.vue:

<template> 
    <h1>Page 2</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style>