Vue.js दूसरे पृष्ठ पर पुनर्निर्देशन करता है

Question

मैं Vue.jsवैनिला जावास्क्रिप्ट के समान एक पुनर्निर्देशन करना चाहता हूं

window.location.href = 'some_url'

मैं इसे Vue.js में कैसे प्राप्त कर सकता हूं?

Comments

क्या आप वाउ राउटर '/ my / vuerouter / url' में परिभाषित मार्ग पर पुनर्निर्देशित करते हैं? या क्या आप एक ब्राउज़र को कुछ-url.com पर पुनर्निर्देशित करते हैं ?

— हाईटूटोडेस्ट्रक्ट

Answer 1

यदि आप उपयोग कर रहे हैं vue-router, तो आपको router.go(path)किसी विशेष मार्ग पर नेविगेट करने के लिए उपयोग करना चाहिए । राउटर का उपयोग कर एक घटक के भीतर से पहुँचा जा सकता है this.$router।

अन्यथा, window.location.href = 'some url';गैर-पृष्ठ एप्लिकेशन के लिए ठीक काम करता है।

EDIT : router.go()VueJS 2.0 में बदला गया। आप उपयोग router.push({ name: "yourroutename"})या अभी- router.push("yourroutename")अभी पुनर्निर्देशित कर सकते हैं ।

https://router.vuejs.org/guide/essentials/named-routes.html

Comments

मेरे मामले में उपयोग एक और गैर-एकल पृष्ठ पर निर्देशित करने के लिए है

— जिमी ओबोनियो अबोर

मुझे मिल रहा था: Uncaught ReferenceError: router is not definedत्रुटि, घटक में राउटर इंजेक्ट कैसे करें?

— सौरभ

@felipekm क्या? क्या यह वही बात नहीं है?

— बैरी डी।

राऊटर.पश ("yourroutename") राउटर के समान नहीं है। पश ({नाम: "yourroutename")। पहले एक सीधे मार्ग को परिभाषित करता है। दूसरा निर्दिष्ट नाम के साथ मार्ग लेता है।

— पिंकी

this.$router.push('routename)

— ka_lin

Answer 2

डॉक्स के अनुसार, रूटर.पश पसंदीदा विधि की तरह लगता है:

किसी भिन्न URL पर जाने के लिए, राऊटर का उपयोग करें। यह विधि इतिहास स्टैक में एक नई प्रविष्टि को आगे बढ़ाती है, इसलिए जब उपयोगकर्ता ब्राउज़र बैक बटन पर क्लिक करता है तो उन्हें पिछले URL पर ले जाया जाएगा।

स्रोत: https://router.vuejs.org/en/essentials/navigation.html

FYI करें: वेबपैक और कंपोनेंट सेटअप, सिंगल पेज ऐप (जहां आप मेन.जेएस के माध्यम से राउटर आयात करते हैं), मुझे यह कहकर राउटर फ़ंक्शन को कॉल करना पड़ा:

this.$router

उदाहरण: यदि आप एक शर्त पूरी होने के बाद "होम" नामक मार्ग पर पुनर्निर्देशित करना चाहते हैं:

this.$router.push('Home') 

Comments

इस सवाल का संकलन (वेबपैक) से कोई लेना-देना नहीं है।

— जिमी ओबोनियो अबोर

डाउनवोट के लिए धन्यवाद, भले ही अधिकांश लोग वीयू क्ली, वेबपैक, राउटर और स्टोर / वीयूएक्स के साथ विकसित हो रहे हों और संभवतः राउटर को कॉल न कर पाने की समस्या में चलेंगे।

— डेव सोतीमानो

@JimmyObonyoAbor hiyo टिप्पणी ना downvote utasema unamlipa haha

— Cholowao

@ ढोलवाओ वह वह, साया तुषासिकिया! मुझे एक प्रतिक्रिया मिली काजी, अगर आपको कौशल मिले तो मुझे पिंग करें ...

— जिमी ओबोनियो अबोर

@JimmyObonyoAbor

— चोलोओओ

Answer 3

महज प्रयोग करें:

window.location.href = "http://siwei.me"

वाउ-राउटर का उपयोग न करें, अन्यथा आप " http://yoursite.com/#//http://si_site " पर पुनर्निर्देशित हो जाएंगे

मेरा वातावरण: नोड 6.2.1, vue 1.0.21, उबंटू।

Comments

मुझे कोई कारण नहीं दिखता, यह दोहरे उद्धरण में क्यों होना चाहिए ..?

— मोरित्ज़

दरअसल मानकज कहते हैं, "बचने के लिए तार के लिए एकल उद्धरण का उपयोग करें।"

— मोरित्ज़

यह कुछ समय पहले था, लेकिन मैं वास्तव में एकल उद्धरणों का उपयोग करके इसे हल करता हूं, लेकिन मुझे लगता है कि दोहरे उद्धरण चिह्नों को भी काम करना चाहिए और जटिल लिंक में उपयोगी हो सकता है।

— बजे जिमी ओबोनियो अबोर

सबसे पहले vue वर्जन को चेक करें। शुरुआती संस्करण में, शायद vue कोड कन्वेंशन की परवाह नहीं करता है। हालाँकि, मेरे वातावरण में, कोड कन्वेंशन से संकलित त्रुटि (es6 संकलित से वेनिला js) का कारण होगा। यदि आपने 'ES6' नोड मॉड्यूल का उपयोग नहीं किया है, तो शायद यह ठीक होगा।

— सिएवेई शेन

क्या होगा यदि आप इसे एक नए टैब पर खोलना चाहते हैं?

— फेठी.आ.आबादी

Answer 4

जब एक घटक स्क्रिप्ट टैग के अंदर आप राउटर का उपयोग कर सकते हैं और ऐसा कुछ कर सकते हैं

this.$router.push('/url-path')

Comments

धन्यवाद आदमी, सरल और सीधे आगे।

— सोल्यूशन स्पिरिट

Answer 5

बस एक मृत सरल मार्ग:

this.$router.push('Home');

Answer 6

यह भी कोशिश कर सकते हैं ...

router.push({ name: 'myRoute' })

Answer 7

अगर आप दूसरे पेज पर जाना चाहते हैं this.$router.push({path: '/pagename'})

यदि आप परम के साथ मार्ग करना चाहते हैं this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

Answer 8

window.location = url;

'url' वह वेब url है जिसे आप पुनर्निर्देशित करना चाहते हैं।

Answer 9

आप वी-बाइंड को सीधे टेम्पलेट की तरह भी उपयोग कर सकते हैं ...

<a :href="'/path-to-route/' + IdVariable">

:का संक्षिप्त नाम है v-bind।

Comments

आप ES6 सिंटैक्स का उपयोग भी कर सकते हैं: href = " `/path-to-route/${IdVariable}`" या नामित मार्ग के रूप में यहाँ बताया गया है ( राऊटर .vuejs.org:href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"

— guide

Answer 10

यदि कोई एक पृष्ठ /aसे दूसरे पृष्ठ पर स्थायी पुनर्निर्देशन चाहता है/b

---

हम redirect:इसमें जोड़े गए विकल्प का उपयोग कर सकते हैं router.js। उदाहरण के लिए यदि हम रूट या बेस url टाइप करने पर उपयोगकर्ताओं को हमेशा एक अलग पृष्ठ पर पुनर्निर्देशित करना चाहते हैं /:

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      redirect: "/someOtherPage",
      name: "home",
      component: Home,
      // () =>
      // import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),

    },
   ]

Answer 11

<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here

Answer 12

तो, मैं क्या देख रहा था, जहां डाल करने के लिए केवल थाwindow.location.href और इस निष्कर्ष मैं के लिए आया था कि पुन: निर्देशन के लिए सबसे अच्छा और सबसे तेज़ तरीका मार्गों में है (कि जिस तरह से है, हम इससे पहले कि हम अनुप्रेषित लोड करने के लिए कुछ भी के लिए इंतजार नहीं है) था।

ऐशे ही:

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

शायद यह किसी की मदद करेगा ।।

Answer 13

अपने मूल अनुरोध के अनुरूप रहने के लिए:

window.location.href = 'some_url'

आप ऐसा कुछ कर सकते हैं:

<div @click="this.window.location='some_url'">
</div>

ध्यान दें कि यह Vue के राउटर का उपयोग करने का लाभ नहीं उठाता है, लेकिन यदि आप "वेनिला जावास्क्रिप्ट के समान Vue.js में पुनर्निर्देशन करना चाहते हैं", तो यह काम करेगा।