Learn about building an SPA with multiple routes and navigation.
- [Instructor] Now we'll finish this single page…application, or SPA for short, by adding…the single product component for the second route.…And we'll also find out how to activate…different routes and enable client side navigation.…Let's un-comment this route for the single product view…with Control slash, and then we'll add a link…to activate it from the product list item component.…I'm just going to turn the name here into a link…using the router link component.…This renders as an anchor tag by default…and takes an attribute for a route path named two.…
Since I want to use an expression here…to add the product id, I'll want to use colon two…to bind it.…And this would be nice opportunity to use…an ES6 template literal with back ticks…and a dollar sign with curly braces…instead of concatenation with the plus operator.…And that's all I have to do there…to set up a link that activates the second route.…Now for our product component.…Basically I can just duplicate product list item…and then alter it a bit.…
So I'm going to copy and paste that file…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton