Никто не запомнит URL, http://yourwebsite.com/product/item-advxv12323-asdfa123, так что давайте преобразовать его во что-нибудь получше.
Хотя Vue Router довольно прост, проблема, с которой я часто сталкивался при создании различных приложений, - это попытка сделать пути для страниц более красивыми.
В этой статье предполагается, что вы уже знакомы с основами Vue Router. Если вы можете настроить свой проект Vue, используя параметры Vue Router по умолчанию (как в моем руководстве по приложению ToDo * wink *), вы будете отличной отправной точкой.
Эта статья покажет вам, как взять значение из URL-пути и передать его вашему компоненту Vue, что позволит вам обрабатывать динамические маршруты.
Обзор
Я собираюсь использовать в качестве примера страницы продуктов. По сути, все, что нам нужно сделать, это использовать способность Vue Router перехватывать динамические маршруты и передавать их как опору компоненту Vue. Затем мы можем проанализировать URL-адрес, чтобы определить, соответствует ли он существующему продукту. Если да, то давайте покажем товар; в противном случае перенаправьте на страницу 404.
Настройка компонентов
Нам нужно будет добавить два компонента:
- Страница продукта
- Страница 404.
Я не буду вдаваться в подробности дизайна страниц, нам просто нужно, чтобы они существовали для целей навигации. Вот примеры страниц, которые я использовал.
Product.vue
<template lang="html">
<div>
Product Displayed: {{ product }}
</div>
</template>
<script>
export default {
props: ["product-path"],
data () {
return {
product: {}
}
},
created () {
// look up the product
// if it exists, proceed
}
}
</script>
<style lang="scss">
</style>
PageNotFound.vue
<template lang="html">
<div>
Error - Page Not Found
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
Настройка Vue-Router
Настроить Vue Router довольно просто, нам просто нужно добавить два маршрута, чтобы сопоставить их с двумя нашими компонентами.
Во-первых, добавить страницу 404 проще. Просто добавьте этот код в свой массив маршрутов.
{
path: '/404',
name: '404',
component: () =>
import('./views/PageNotFound.vue')
}
Теперь немного более сложный (не беспокойтесь, это все еще просто), который позволяет использовать динамические URL-адреса и параметры. Это соответствует тому же шаблону, что и получение параметров из URL-адреса в Node.js, поэтому, если вы хоть немного знакомы с этим, это должно быть легкой прогулкой. А если вы этого не сделаете, вы довольно быстро увидите, как это работает.
Единственная разница для правильной передачи параметров из Vue Router в компонент состоит в том, что нам нужно указать props: true в этом маршруте.
Полный код этого маршрута будет выглядеть так.
{
path: "/:product",
name: "Product",
props: true,
component: () => import("../views/Product.vue")
}
Двоеточие в пути означает, что этот маршрут подберет все пути, соответствующие этому шаблону. Другими словами, вместо :product может быть любая строка, не соответствующая другому маршруту. И поскольку мы установили для props значение true, эта строка будет передана компоненту Product.vue как свойство с именем product.
Пример реализации
Теперь, когда у нас есть все динамические маршруты, отображаемые на наш компонент Product, последний шаг - определить, когда у нас есть реальный продукт, а когда нам нужно перенаправить на страницу 404.
В полном приложении это часто будет соединение с некоторой базой данных, которая содержит поиск между URL-путем и продуктом. Тем не менее, я думаю, что здесь нет необходимости показывать, потому что мы в первую очередь сосредотачиваемся на части этой проблемы, связанной с Vue Router.
Чтобы поиздеваться над этим, я просто жестко запрограммировал поисковую таблицу в Product.vue
Внутри ловушки created мы сначала проверяем, соответствует ли текущий URL-путь действительному продукту. Если это так, покажите это. В противном случае мы используем команду this.$router.push(“/404”), чтобы перенаправить пользователя на страницу 404.
// Product.vue
<script>
const products = [
{
path: "example-product-1",
product: {name: "Product 1", price: 500}
},
{
path: "example-product-2",
product: {name: "Product 2", price: 1000}
},
{
path: "example-product-3",
product: {name: "Product 3", price: 1500}
}
]
export default {
props: ["productPath"],
data () {
return {
product: {}
}
},
created () {
// look up the product
const foundProduct = products.filter(product => {
return product.path === this.productPath
});
// if it exists, proceed
if (foundProduct.length > 0) {
this.product = foundProduct;
} else {
// otherwise, go to the 404 page
this.$router.push("/404");
}
}
}
</script>
Вот и все! Это основы передачи свойств из маршрута в компонент Vue и использования этой информации для определения, действителен маршрут или нет.
Если вы хотите увидеть мой пример кода, вы можете проверить его на Github.
Способы расширить это
Конечно, это всего лишь простое руководство, которое покажет вам, как заставить динамические маршруты работать в Vue Router. Вот несколько способов сделать это еще более продвинутым.
- Реализация подключения к БД.
- Вы можете реализовать условную визуализацию компонентов, чтобы иметь возможность обрабатывать не только продукты (или любой другой тип объекта, для которого требуется динамический URL-адрес). Это можно сделать с помощью тега
<component :is=''>.
Дополнительное чтение
Если вас интересуют более продвинутые возможности vue-router, вам подойдет документация! В Vue Router вы можете сделать так много, что избавляет от ненужных перенаправлений в дальнейшем.
