การเปลี่ยนเส้นทาง Vue.js ไปยังหน้าอื่น

ฉันต้องการเปลี่ยนเส้นทางVue.jsให้คล้ายกับจาวาสคริปต์วานิลลา

window.location.href = 'some_url'

ฉันจะบรรลุสิ่งนี้ใน Vue.js ได้อย่างไร

หากคุณกำลังใช้vue-routerคุณควรใช้router.go(path)เพื่อนำทางไปยังเส้นทางใดเส้นทางหนึ่ง this.$routerเราเตอร์สามารถเข้าถึงได้จากภายในโดยใช้องค์ประกอบ

มิฉะนั้นจะwindow.location.href = 'some url';ทำงานได้ดีสำหรับแอปที่ไม่ใช่หน้าเดียว

แก้ไข : router.go()เปลี่ยนแปลงใน VueJS 2.0 คุณสามารถใช้router.push({ name: "yourroutename"})หรือrouter.push("yourroutename")ตอนนี้เพื่อเปลี่ยนเส้นทาง

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

ตามเอกสาร router.push ดูเหมือนจะเป็นวิธีที่ต้องการ:

หากต้องการไปยัง URL อื่นให้ใช้ router.push วิธีนี้จะผลักรายการใหม่ไปยังกองประวัติดังนั้นเมื่อผู้ใช้คลิกปุ่มย้อนกลับของเบราว์เซอร์ระบบจะนำไปที่ URL ก่อนหน้า

แหล่งที่มา: https://router.vuejs.org/en/essentials/navigation.html

FYI: การตั้งค่า Webpack & ส่วนประกอบแอพหน้าเดียว (ที่คุณนำเข้าเราเตอร์ผ่าน Main.js) ฉันต้องเรียกใช้ฟังก์ชันเราเตอร์โดยพูดว่า:

this.$router

ตัวอย่าง: หากคุณต้องการเปลี่ยนเส้นทางไปยังเส้นทางที่เรียกว่า "บ้าน" หลังจากตรงตามเงื่อนไข:

this.$router.push('Home') 

เพียงใช้:

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

อย่าใช้ vue-router มิฉะนั้นคุณจะถูกเปลี่ยนเส้นทางไปที่ " http://yoursite.com/#!/http://siwei.me "

สภาพแวดล้อมของฉัน: โหนด 6.2.1, vue 1.0.21, Ubuntu

เมื่ออยู่ในแท็กสคริปต์คอมโพเนนต์คุณสามารถใช้เราเตอร์และทำสิ่งนี้ได้

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

การกำหนดเส้นทางที่เรียบง่ายเพียงอย่างเดียว:

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

ลองดูได้ด้วย ...

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

หากคุณต้องการกำหนดเส้นทางไปยังหน้าอื่น this.$router.push({path: '/pagename'})

หากคุณต้องการกำหนดเส้นทางด้วย params this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

window.location = url;

"url" คือ URL ของเว็บที่คุณต้องการเปลี่ยนเส้นทาง

คุณยังสามารถใช้ v-bind กับเทมเพลตโดยตรงเช่น ...

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

เป็นคำย่อของ:v-bind

หากใครต้องการเปลี่ยนเส้นทางแบบถาวรจากเพจหนึ่ง/aไปอีกเพจ/b

เราสามารถใช้redirect:ตัวเลือกที่เพิ่มในไฟล์router.js. ตัวอย่างเช่นหากเราต้องการเปลี่ยนเส้นทางผู้ใช้ไปยังเพจอื่นเสมอเมื่อเขาพิมพ์ root หรือ base 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"),

    },
   ]

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

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

ดังนั้นสิ่งที่ฉันกำลังมองหามีเพียงที่ที่จะใส่window.location.hrefและข้อสรุปที่ฉันได้มาก็คือวิธีที่ดีที่สุดและเร็วที่สุดในการเปลี่ยนเส้นทางคือในเส้นทาง (ด้วยวิธีนี้เราไม่รอให้สิ่งใดโหลดก่อนที่จะเปลี่ยนเส้นทาง)

แบบนี้:

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

บางทีมันอาจจะช่วยใครสักคน ..

เพื่อให้สอดคล้องกับคำขอเดิมของคุณ:

window.location.href = 'some_url'

คุณสามารถทำสิ่งนี้:

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

โปรดทราบว่าสิ่งนี้ไม่ได้ใช้ประโยชน์จากการใช้เราเตอร์ของ Vue แต่ถ้าคุณต้องการ "ทำการเปลี่ยนเส้นทางใน Vue.js คล้ายกับ vanilla javascript" สิ่งนี้จะได้ผล