Question 7
Consider the below Vue router setup.
const Product = { template: `<div><h1>Product {{ $route.params.id }}</h1></div>`};
const ProductReviews = { template: `<div><h2>Reviews for Product</h2></div>`};
const routes = [ { path: '/products/:id', component: Product, children: [ { path: 'reviews', component: ProductReviews } ] }];
const router = new VueRouter({ routes});What will be the behavior when the user visits “/products/123/reviews”?
The Product component will be displayed with the id 123, and the ProductReviews component will be displayed as a child route.
The Product component will not display anything because the reviews path is incorrectly nested.
Only the ProductReviews component will be displayed, and the Product component will be ignored.
A 404 error will be shown because the /reviews route cannot be accessed as a child route.