Vue Mastery VUE ROUTER CHEAT SHEET (Part 1)

Basic Routing Setup src/App.vue src/main.js

<template> import router from './router'

<nav>
<RouterLink to="/">Home</RouterLink> const app = createApp(App)
<RouterLink to="/product-list">Product List</RouterLink> app.use(router)
</nav>
<RouterView />
</template> use RouterLink and RouterView add router to the app

src/router/index.js

const router = createRouter({

...
routes: [ src/views/HomeView.vue
{
path: '/', <template>
name: 'home', <h1>Home Page</h1>
component: HomeView ...
}, </template>
{
path: '/product-list',
src/views/ProductListView.vue
name: 'product-list',
component: ProductListView
} <template>
] <h1>Product List Page</h1>
}) set up the routes ...
</template>

Dynamic Routing src/views/ProductListView.vue src/views/ProductView.vue

<template> <script>
<h1>Product List Page</h1> export default {
<ul> data() {
<li> return {
<RouterLink to="/product/1">Computer</RouterLink> product: {} get the param with
</li> } Options API
<li> },
<RouterLink to="/product/2">Laptop</RouterLink> created() {
</li> const id = parseInt(this.$route.params.id)
... this.product = products.find(id)
}
}
src/router/index.js </script>

const router = createRouter({ <script setup>

... import { useRoute } from 'vue-router'
routes: [ set up the param with
... a colon prefix const route = useRoute()
{ const id = parseInt(route.params.id)
path: '/product/:id', const product = products.find(id)
name: 'product', </script>
component: ProductView get the param with
} <template> Composition API
] <main>
}) <h1>{{ product.name }}</h1>
</main>
</template>

Learn Vue Router now with premium courses on VueMastery.com

Visit VueMastery.com to explore our library of Vue courses.
 Vue Mastery VUE ROUTER CHEAT SHEET (Part 2)

Nested Routing src/router/index.js

const router = createRouter({

...
routes: [ src/views/ProductView.vue
{
path: '/', <template>
... <h1>{{ product.name }}</h1>
}, ...
{ <RouterView></RouterView>
path: '/contact', </template>
...
}, put another RouterView here
product/1 {
path: '/product/:id',
name: 'product',
component: ProductView, src/components/ProductReviews.vue
children: [
product/1/reviews { <template>
path: 'reviews', <h2>Reviews</h2>
component: ProductReviews ...
}, </template>
product/1/variations {
path: 'variations', src/components/ProductVariations.vue
component: ProductVariations
<template>
}
<h2>Variations</h2>
]
...
} set up the nested routes with </template>
]
the children option
})

Go to a page using script

<script setup> <script>

import { useRouter } from 'vue-router' export default {
methods: {
const router = useRouter() goToProductList() {
this.$router.push('/product-list')
const goToProductList = () => { }
router.push('/product-list') }
} }
</script> with Composition API </script> with Options API

Redirect to somewhere else

const router = createRouter({

...
routes: [ The Home page route will be redirected
{ to the Product List page.
path: '/',
name: 'home',
redirect: to => ({ path: '/product-list' })
},
{
path: '/product-list',
name: 'product-list',
component: ProductListView
}

Learn Vue Router now with premium courses on VueMastery.com

Visit VueMastery.com to explore our library of Vue courses.