Я хотів би зробити перенаправлення Vue.js
аналогічно ванільному javascript
window.location.href = 'some_url'
Як я міг цього досягти у Vue.js?
Я хотів би зробити перенаправлення Vue.js
аналогічно ванільному javascript
window.location.href = 'some_url'
Як я міг цього досягти у Vue.js?
Відповіді:
Якщо ви користуєтесь 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")
зараз для переадресації.
Uncaught ReferenceError: router is not defined
помилка, як ввести маршрутизатор в компонент?
this.$router.push('routename)
Згідно з документами, router.push здається кращим методом:
Щоб перейти до іншої URL-адреси, використовуйте router.push. Цей метод висуває новий запис у стеку історії, тому, коли користувач натискає кнопку "Назад" браузера, він буде переведений на попередню URL-адресу.
джерело: https://router.vuejs.org/en/essentials/navigation.html
FYI: Налаштування веб-пакунків та компонентів, додаток для однієї сторінки (куди ви імпортуєте роутер через 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' })
Ви також можете використовувати v-bind безпосередньо до шаблону, як ...
<a :href="'/path-to-route/' + IdVariable">
:
це абревіатура v-bind
.
`/path-to-route/${IdVariable}`
" Або названий маршрут, як зазначено тут ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
Якщо хтось хоче постійного переадресації з однієї сторінки /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"),
},
]
Отже, я шукав лише те, куди слід поставити, 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 подібне до ванільного javascript", це буде працювати.