- Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
- Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
- Reusable componets should be located in the components directory.
- Reusable componets should be located in the components directory.
- Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
- Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
@ -10,7 +12,15 @@
- Using `$route` within your component limits it's flexibility. Within the `router.js` you can use the `props: true` attribute on a route. This will send the route params into the component as props. This will allow you to also reuse a componet as a child component sending in the username as a prop. Think of a Modal that an admin would use to see a users profile info without navigating to the user's Page.
- Using `$route` within your component limits it's flexibility. Within the `router.js` you can use the `props: true` attribute on a route. This will send the route params into the component as props. This will allow you to also reuse a componet as a child component sending in the username as a prop. Think of a Modal that an admin would use to see a users profile info without navigating to the user's Page.
- Linking to Dynamic routes looks like: `<router-link :to="{ name: 'user, params: { username: 'Drew'} }">Drew's user page</router-link>`
- Linking to Dynamic routes looks like: `<router-link :to="{ name: 'user, params: { username: 'Drew'} }">Drew's user page</router-link>`
### Components
- You should register globally 'Base' components. So the components you will use frequently. Examples could be `BaseIcon.vue` or maybe a `BaseButton.vue` component.
- You should register globally 'Base' components. So the components you will use frequently. Examples could be `BaseIcon.vue` or maybe a `BaseButton.vue` component.
- A BaseIcon was created and registered Globally with props that let us dynamically link to symbols in the `feather-sprite.svg` located in our public folder. The dynamic registration of components came from a recipe in the Vue documentation. It required installing `lodash` as an npm dependecy.
- Commonly reusable components like display elemtents, form elements, buttons, and modals can be created like our Base Components using props, but if we want a "dynamic" template we can use `Slots` to insert a custom template.
- Slots get access to parent components (Data, computed properties).
- Scoped slots are when you want the template code to have access to the child components data. (Advanced pattern).
- Adding a name attribute to a slot `<slot name="heading"></slot>` allows you to use multiple slots in your component definition. Our parent component now would use `<h2 slot="heading">My header</h2>` to place the content appropriately
- A `template` tag can be added to provide more than one tag within a slot block. The template can also make use of the `slot=` attribute. Using the `template` tag prevents your component code from getting cluttered with divs. You can also use whatever tags and Components are available to this component and pass it into slots.
