Перенаправление Vue.js на другую страницу

134

Я хотел бы сделать перенаправление Vue.jsаналогично ванильному javascript

window.location.href = 'some_url'

Как я мог добиться этого в Vue.js?

Джимми Обоньо Абор
источник
Вы имеете в виду перенаправление на маршрут, определенный в vue router '/ my / vuerouter / url'? Или вы браузер перенаправляете на some-url.com ?
hitautodestruct

Ответы:

188

Если вы используете 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

Джефф
источник
2
В моем случае это использование для
перехода
8
Я получал: Uncaught ReferenceError: router is not definedошибка, как вставить маршрутизатор в компонент?
Саураб,
@felipekm что? Разве это не то же самое?
Barry D.
3
router.push ("yourroutename") НЕ то же самое, что router.push ({name: "yourroutename"). Первый определяет маршрут напрямую. Второй выбирает маршрут с указанным именем.
pinki
8
this.$router.push('routename)
ka_lin
85

Согласно документам, router.push кажется предпочтительным методом:

Чтобы перейти к другому URL-адресу, используйте router.push. Этот метод помещает новую запись в стек истории, поэтому, когда пользователь нажимает кнопку возврата в браузере, он переходит к предыдущему URL-адресу.

источник: https://router.vuejs.org/en/essentials/navigation.html

К вашему сведению: Webpack и настройка компонентов, одностраничное приложение (где вы импортируете маршрутизатор через Main.js), мне пришлось вызывать функции маршрутизатора, говоря:

this.$router

Пример: если вы хотите перенаправить на маршрут под названием «Дом» после выполнения условия:

this.$router.push('Home') 
Дэйв Соттимано
источник
1
Этот вопрос не имеет отношения к компиляции (webpack).
Джимми Обоньо Абор,
12
Спасибо за отрицательный голос, хотя большинство людей будут разрабатывать vue cli, webpack, router и store / vuex и, скорее всего, столкнутся с проблемой невозможности вызвать маршрутизатор.
Дэйв Соттимано
1
@JimmyObonyoAbor привет комментарий на отрицательный голос утасема unamlipa хаха
Cholowao
@Cholowao хе хе хе, 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
Я не вижу причин, почему это должно быть в двойных кавычках ..?
Moritz
1
На самом деле standardjs говорит: «Используйте одинарные кавычки для строк, кроме как во избежание экранирования».
Moritz
это было некоторое время назад, но на самом деле я решил это, используя одинарные кавычки, но я думаю, что двойные кавычки также должны работать и могут быть полезны в сложных ссылках.
Джимми Обоньо Абор
сначала проверьте версию vue. в ранней версии, возможно, vue не заботится о соглашении о коде. Однако в моей среде соглашение о коде вызовет ошибку компиляции (из es6, скомпилированного в vanilla js). Если вы не использовали узел узла ES6, возможно, все будет в порядке.
Siwei Shen 申思维
что, если вы хотите открыть его на новой вкладке?
Fthi.a. Abadi
29

Находясь внутри тега сценария компонента, вы можете использовать маршрутизатор и сделать что-то вроде этого

this.$router.push('/url-path')
Нджеру Сайрус
источник
Спасибо, чувак, просто и понятно.
Solution Spirit
8

Просто мертвая простая маршрутизация:

this.$router.push('Home');
Мохаммад Махди КучакЯзди
источник
7

тоже можете попробовать ...

router.push({ name: 'myRoute' })
Давод Асланифакор
источник
7

если вы хотите перейти на другую страницу this.$router.push({path: '/pagename'})

если вы хотите маршрутизировать с параметрами this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

Bagzie
источник
5
window.location = url;

url - это веб-адрес, который вы хотите перенаправить.

Rayees Pk
источник
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. Например, если мы хотим перенаправлять пользователей всегда на отдельную страницу, когда он вводит корневой или базовый 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», это сработает.

AlmostPitt
источник