Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как динамически перемещаться по маршрутам Vue Router.
Программная навигация
Мы можем перемещаться по маршрутам программно в дополнение к использованию router-link для создания ссылки, позволяющей пользователям перемещаться по маршрутам.
router.push (расположение, onComplete ?, onAbort?)
Для этого мы можем использовать экземпляр $router, доступный компоненту, для программной навигации по маршрутам.
router.push(…) вызывается при нажатии router-link ссылки. Мы можем назвать это сами программной навигацией по маршрутам.
Например, мы можем определять маршруты и перемещаться по ним программно следующим образом:
src/index.js :
const Foo = { template: "<p>foo</p>" };
const Bar = { template: "<p>bar</p>" };
const routes = [
{
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
}
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
methods: {
goTo(route) {
this.$router.push(route);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<a href="#" @click='goTo("foo")'>Foo</a>
<a href="#" @click='goTo("bar")'>Bar</a>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше коде у нас есть метод goTo, который принимает строку для маршрута, по которому мы хотим перейти.
В этом методе мы вызываем this.$router.push(route);, чтобы перейти к нужному маршруту.
Итак, когда мы нажимаем Foo, мы видим foo, а когда мы нажимаем Bar, мы видим bar.
Мы также можем передать объект следующим образом:
this.$router.push({ path: route });
Кроме того, мы можем перейти к именованным маршрутам, когда $router.push. Для этого пишем:
src/index.js :
const Foo = { template: "<p>foo</p>" };
const Bar = { template: "<p>bar</p>" };
const routes = [
{
name: "foo",
path: "/foo",
component: Foo
},
{
name: "bar",
path: "/bar",
component: Bar
}
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
methods: {
goTo(name) {
this.$router.push({ name });
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<a href="#" @click='goTo("foo")'>Foo</a>
<a href="#" @click='goTo("bar")'>Bar</a>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше коде мы определили именованные маршруты, добавив свойство name к нашим маршрутам, написав:
const routes = [
{
name: "foo",
path: "/foo",
component: Foo
},
{
name: "bar",
path: "/bar",
component: Bar
}
];
Затем мы можем перейти к маршруту по имени следующим образом в методе goTo:
this.$router.push({ name });
Мы можем передать параметры маршрута следующим образом:
router.push({ name: 'user', params: { userId: '123' } })Следующее не будет работать:
router.push({ path: 'user', params: { userId: '123' } })Мы можем перейти к маршрутам со строками запроса следующим образом:
router.push({ path: 'user', query: { userId: '123' } })or:
router.push({ name: 'user', query: { userId: '123' } })Мы также можем пойти по пути с параметром маршрута следующим образом:
router.push({ path: `/user/123` });Например, мы можем использовать их следующим образом:
const Foo = { template: "<p>foo {{$route.query.id}}</p>" };
const Bar = { template: "<p>bar</p>" };
const routes = [
{
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
}
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
methods: {
goTo(path, query) {
this.$router.push({ path, query });
}
}
});
Затем мы видим foo 1, когда щелкаем по Foo, поскольку мы берем строку запроса с id в качестве ключа.
Это то же самое, что перейти к /#/foo?id=1 в браузере.
Те же правила применяются к свойству to компонента router-link.
В Vue Router 2.2.0 или новее мы можем дополнительно предоставить обратные вызовы onComplete и onAbort для router.push или router.replace в качестве 2-го и 3-го аргументов.
В Vue Router 3.1.0+. router.push и router.replace вернут обещания, и нам не нужно передавать 2-й и 3-й аргументы для обработки этих случаев.
Если наш пункт назначения совпадает с текущим маршрутом, и меняются только параметры, например с /users/1 на /users/2, тогда мы должны использовать ловушку beforeRouteUpdate, чтобы реагировать на изменения.
router.replace (расположение, onComplete ?, onAbort?)
router.replace действует как router.push, за исключением того, что не добавляется новая запись в историю.
router.replace(…) совпадает с <router-link :to=”…” replace>.
router.go (сущ.)
Мы можем использовать router.go для перехода вперед или назад, передав целое число для количества шагов вперед или назад. Негатив - это назад, а положительный - вперед.
Например, мы можем использовать это так:
src/index.js :
const Foo = { template: "<p>foo</p>" };
const Bar = { template: "<p>bar</p>" };
const routes = [
{
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
}
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
methods: {
forward() {
this.$router.go(-1);
},
back() {
this.$router.go(1);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="foo">Foo</router-link>
<router-link to="bar">Bar</router-link>
<a href="#" @click="forward">Forward</a>
<a href="#" @click="back">Back</a>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
Нам нужны методы forward и back для перемещения вперед и назад соответственно.
router.go выдаст ошибку, если такой записи в истории не существует.
Заключение
У нас есть router.push метод для перехода к пути с другими именами, путями, строкой запроса или параметрами.
Точно так же мы можем сделать то же самое с router.replace, но без добавления новой записи в историю.
Оба они принимают строку или объект в качестве маршрута и обработчики onComplete и onAbort.
router.go позволяет нам перемещаться вперед и назад в истории браузера. Для перехода вперед или назад требуется несколько шагов.
Примечание из JavaScript In Plain English
Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!
Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.
