Перенаправлення Vue.js на іншу сторінку


134

Я хотів би зробити перенаправлення Vue.jsаналогічно ванільному javascript

window.location.href = 'some_url'

Як я міг цього досягти у Vue.js?


Ви маєте на увазі переадресацію на маршрут, визначений у маршрутизаторі vue '/ my / vuerouter / url'? Або ви переглядаєте браузер на some-url.com ?
hitautodestruct

Відповіді:


187

Якщо ви користуєтесь 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


2
У моєму випадку використання полягає в тому, щоб
перенаправити

8
Я отримував: Uncaught ReferenceError: router is not definedпомилка, як ввести маршрутизатор в компонент?
Саураб

@felipekm що? Хіба це не те саме?
Баррі Д.

3
router.push ("ваше ім'я користувача") НЕ такий же, як router.push ({name: "yourroutename"). Спочатку безпосередньо визначається маршрут. Другий приймає маршрут із вказаною назвою.
пінкі

8
this.$router.push('routename)
ka_lin

85

Згідно з документами, router.push здається кращим методом:

Щоб перейти до іншої URL-адреси, використовуйте router.push. Цей метод висуває новий запис у стеку історії, тому, коли користувач натискає кнопку "Назад" браузера, він буде переведений на попередню URL-адресу.

джерело: https://router.vuejs.org/en/essentials/navigation.html

FYI: Налаштування веб-пакунків та компонентів, додаток для однієї сторінки (куди ви імпортуєте роутер через Main.js), мені довелося викликати функції маршрутизатора, сказавши:

this.$router

Приклад: якщо ви хочете переспрямувати маршрут, який називається "Головна" після виконання умови:

this.$router.push('Home') 

1
Це питання не має нічого спільного з компіляцією (webpack).
Jimmy Obonyo Abor

12
Дякуємо за знижку, навіть якщо більшість людей будуть розвиватися за допомогою vue cli, webpack, маршрутизатора та магазину / vuex, і, ймовірно, зіткнуться з проблемою неможливості викликати маршрутизатор.
Дейв Соттімано

1
@JimmyObonyoAbor hiyo коментар на downvote utasema unamlipa haha
Cholowao

@Cholowao he he he, sawa tushasikia! я отримав реакцію на казі, пінг мене, якщо ти маєш навички ...
Джиммі Обеньо Абор

1
@JimmyObonyoAbor
Cholowao

42

просто використовуйте:

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

Не використовуйте vue-router, інакше вас буде переспрямовано на " http://yoursite.com/#!/http://siwei.me "

моє середовище: вузол 6.2.1, vue 1.0.21, Ubuntu.


1
Я не бачу жодної причини, чому це повинно бути в подвійних лапках ..?
Моріц

1
Насправді standardjs говорить: "Використовуйте одинарні лапки для рядків, за винятком того, щоб уникнути їх бігу".
Моріц

це було деякий час тому, але я насправді вирішив це за допомогою одинарних лапок, але я думаю, що подвійні лапки повинні також працювати і можуть бути корисними у складних посиланнях.
Jimmy Obonyo Abor

спочатку перевірте версію vue. у ранній версії, можливо, Vue не переймається умовами коду. Однак у моєму середовищі конвенція коду призведе до помилки компіляції (від es6, складеної до vanilla js). Якщо ви не використовували модуль вузла 'ES6', можливо, це буде нормально.
Siwei Shen 申思维

що робити, якщо ви хочете відкрити його на новій вкладці?
Fthi.a.Abadi

29

Якщо всередині тегу сценарію компонента, ви можете використовувати маршрутизатор і робити щось подібне

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

Спасибі людина, Простий і прямо вперед.
Рішення Духу



7

якщо ви хочете перейти на іншу сторінку this.$router.push({path: '/pagename'})

якщо ви хочете прокладати парами this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})


5
window.location = url;

'url' - це веб-URL, який потрібно переспрямувати.


3

Ви також можете використовувати v-bind безпосередньо до шаблону, як ...

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

:це абревіатура v-bind.


Ви також можете використовувати синтаксис ES6:: href = " `/path-to-route/${IdVariable}`" Або названий маршрут, як зазначено тут ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE

1

Якщо хтось хоче постійного переадресації з однієї сторінки /aна іншу/b


Ми можемо використовувати redirect:опцію, додану в router.js. Наприклад, якщо ми хочемо завжди перенаправляти користувачів на окрему сторінку, коли він вводить root або базовий 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"),

    },
   ]

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

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

0

Отже, я шукав лише те, куди слід поставити, window.location.hrefі висновок, до якого я дійшов, - це те, що найкращий і найшвидший спосіб перенаправлення - це в маршрутах (таким чином, ми не чекаємо, поки щось завантажиться, перш ніж перенаправитись).

Подобається це:

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

Можливо, це комусь допоможе ..


0

Щоб відповідати своєму первинному запиту:

window.location.href = 'some_url'

Ви можете зробити щось подібне:

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

Зауважте, що цим не скористається використання маршрутизатора Vue, але якщо ви хочете "зробити перенаправлення у Vue.js подібне до ванільного javascript", це буде працювати.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.