Using Vue-Router Dynamic Routes to Load Data Chapter 9HTML components
The HTML components will be used within the page components to help reduce repetition
in our code for recurring layouts:
Product in a list—ListProducts: This will display a paginated list of products
when viewing in a list view – such as in the HomePage or CategoryPage
components.
Category listing—ListCategories: This will create a list of categories for
navigation.
List of Purchases—ListPurchases: This component will appear in the basket,
checkout, and order confirmation page; it will list the products in a table form –
detailing the variation, price, and quantity. It will also feature the total price of all
the products in the basket.
Filtering—ProductFiltering: A component used on the side of a category
page will offer the user the ability to filter and will update the URL, using the
GET parameters we covered in Chapter 8, Introducing Vue-Router and Loading
URL-Based Components.Paths
With our components outlined, we can plan the paths and URLs to our shop, and which
components or actions they are going to take. We also need to consider erroneous URLs
and whether we should redirect the user to a suitable place or display an error message:
/: Home
/category/:slug: CategoryPage, using the :slug unique identifier to
identify which products to show
/category: This will redirect to /
/product/:slug: ProductPage – once again, using the :slug to identify the
product
/product: This will redirect to /
/basket: OrderBasket
/checkout: OrderCheckout – if there are no products, however, it will redirect
the user to /basket
/complete: OrderConfirmation – if the user did not come from
the OrderCheckout component, then they will be redirected to /basket