Chuyển hướng Vue.js sang trang khác

Tôi muốn thực hiện chuyển hướng Vue.jstương tự như javascript vanilla

window.location.href = 'some_url'

Làm cách nào tôi có thể đạt được điều này trong Vue.js?

Nếu bạn đang sử dụng vue-router, bạn nên sử dụng router.go(path)để điều hướng đến bất kỳ tuyến đường cụ thể nào. Các bộ định tuyến có thể được truy cập từ trong một thành phần bằng cách sử dụng this.$router.

Mặt khác, window.location.href = 'some url';hoạt động tốt cho các ứng dụng không một trang.

EDIT : router.go()đã thay đổi trong VueJS 2.0. Bạn có thể sử dụng router.push({ name: "yourroutename"})hoặc chỉ router.push("yourroutename")bây giờ để chuyển hướng.

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

Theo các tài liệu, router.push có vẻ như là phương pháp ưa thích:

Để điều hướng đến một URL khác, hãy sử dụng bộ định tuyến. Phương pháp này đẩy một mục mới vào ngăn xếp lịch sử, vì vậy khi người dùng nhấp vào nút quay lại của trình duyệt, họ sẽ được đưa đến URL trước đó.

nguồn: https://router.vuejs.org/en/essentials/navlation.html

FYI: Webpack & thiết lập thành phần, ứng dụng một trang (nơi bạn nhập bộ định tuyến qua Main.js), tôi đã phải gọi các chức năng của bộ định tuyến bằng cách nói:

this.$router

Ví dụ: nếu bạn muốn chuyển hướng đến một tuyến đường gọi là "Nhà" sau khi một điều kiện được đáp ứng:

this.$router.push('Home') 

chỉ dùng:

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

Không sử dụng bộ định tuyến vue, nếu không, bạn sẽ được chuyển hướng đến " http://yoursite.com/#!/http://siwei.me "

môi trường của tôi: nút 6.2.1, vue 1.0.21, Ubuntu.

Khi bên trong thẻ script thành phần, bạn có thể sử dụng bộ định tuyến và làm một cái gì đó như thế này

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

Chỉ là một định tuyến đơn giản chết:

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

cũng có thể thử điều này ...

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

nếu bạn muốn định tuyến đến một trang khác this.$router.push({path: '/pagename'})

nếu bạn muốn định tuyến với params this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

window.location = url;

'url' là url web bạn muốn chuyển hướng.

Bạn cũng có thể sử dụng liên kết v trực tiếp vào mẫu như ...

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

những :là viết tắt của v-bind.

Nếu ai muốn chuyển hướng vĩnh viễn từ trang này /asang trang khác/b

Chúng ta có thể sử dụng redirect:tùy chọn được thêm vào trong router.js. Ví dụ: nếu chúng tôi muốn chuyển hướng người dùng luôn đến một trang riêng khi anh ta nhập url gốc hoặc url cơ sở /:

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

Vì vậy, điều tôi đang tìm kiếm chỉ là nơi đặt window.location.hrefvà kết luận mà tôi đã đưa ra là cách tốt nhất và nhanh nhất để chuyển hướng là trong các tuyến đường (theo cách đó, chúng tôi không chờ đợi bất cứ điều gì tải trước khi chúng tôi chuyển hướng).

Như thế này:

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

Có lẽ nó sẽ giúp được ai đó ..

Để phù hợp với yêu cầu ban đầu của bạn:

window.location.href = 'some_url'

Bạn có thể làm một cái gì đó như thế này:

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

Lưu ý rằng điều này không tận dụng lợi thế của việc sử dụng bộ định tuyến của Vue, nhưng nếu bạn muốn "thực hiện chuyển hướng trong Vue.js tương tự như javascript vanilla", điều này sẽ hoạt động.