This is a sequel to my Vue Js for beginners part 4.Here I will explain about Vue routing and I will explain Firebase authentication to make you understand about guards.
Installation
You you follow by previous post I discussed about installation of Vue-router. So best practice would be to install app while installing manually however in other case here
if you are using APi of Vue 2.6 or so you would most likely use vue-router-3
npm install vue-router
If you are using the API of Vue 3.0 then preferably you would use
vue-router-4
Basics are same in both. As I have already installed Vue router from vue cli I will just jump onto the basics.
Route Links
If we want to create a route we need to go to router/index.js file.
This is what you will see
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
// {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Creating your route
If you want to create your own route.Inside routes array you need to write.On top import the component.
import First from '../components/First'
const routes=[
{
path:'/first',
name:'First',
component:First
}
]
Here path is the want you want the route to go. Name is the name you need to assign you can name it anything. Next thing is the component assosiated with the route which we need to import.
In FirstCompoent.vue we write
Now if we check the route we can see
<template>
<div>
Route of first component
</div>
</template>
If we see on the browser
So we see our first route
Route Links and named routes
Why named routes??
Some of you may ask why we need named routes. At first lets study about route links.
*In App.vue template part *
<template>
<div>
<router-link to="/first">First</router-link>
<router-view/>
</div>
</template>
If we see output there is a link which directs us to the first route.
Difference bewteen routelink and ahref
The main difference between route links and ahref is that if you wrote <a href="/first">First</a> then while switching the page would reload.
Named routes
Now we can also link to your preferred route with something like this
<router-link :to="{name:'First'}">First</router-link>
Whats the benefit of using it?
The main benefit of using it is while we name our routes in case we change the route path we dont have to manually go to each links and change the route.
For example if we rename route path from first to second
{
path:'/second',
name:'First',
component:First
}
If we go to route we can see that route path has automatically changed. Thats the benefit of using it is the paths can change but since name is same it will automatically redirect us to that path with changed route.
Now we can see that we go the route it changes the path but we didnt have to change anything in template
Important thing whatever you write anything in template part of App.vue it will be on top on every component. So if you have a Navbar which is usually same across all components you can import that to App.vue you dont need to import Navbar on top of every component
Why use router view??
<router-view/> is used so to render or view a component. If you comment out routerview you will see that while we link to any particular route we wont see anything.
If you write something below <router-view/> that will appear below every component.So if you have a common Footer you can place it below <router-view/>
*Lazy Loading *
Its another feature if you want to import any component in router/index.js you can directly write
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
Route Params
Suppose we have have /posts in a route and we want to link them to individual posts by passisng id as a parameter.
Posts.vue
<div v-for="post in posts" :key="post.id">
<div style="cursor:pointer">
{{post.title}}
</div>
<div>{{post.description}}</div>
</div>
</template>
<script>
export default {
data(){
return{
posts:[
{id:1,title:'Title One',description:'Description One'},
{id:2,title:'Title Two',description:'Description Two'}]
}
}
}
</script>
<style>
</style>
The route of posts is
{
path:'/posts',
name:'Posts',
component:Posts
},
The route for posts with params is
{
path:'/posts/:id',
name:'SinglePost',
component:Posts
},
Now in Posts.vue in template this is how we will link Post to SinglePost.vue with route params
<div v-for="post in posts" :key="post.id">
<div style="cursor:pointer">
<route-link :to="{name:'SinglePost',params:{id:post.id}}">{{post.title}}</route-link>
</div>
<div>{{post.description}}</div>
</div>
In SinglePost.vue
<div>
{{id}}
</div>
</template>
<script>
export default {
data(){
return{
id:this.$route.params.id,
}
}
}
</script>
Here we see in data we return the route params and we can see the id.
Here we see
When we click on any post
Now you see we can see id of individual post
We can also pass in SinglePost.vue
<template>
<div>
The id is-{{id}}
</div>
</template>
<script>
export default {
props:['id'],
data(){
return{
}
}
}
</script>
<style>
</style>
For this in route we need to write
{
path:'/posts/:id',
name:'SinglePost',
component:SinglePost,
props:true
}
So here we need to pass props. In same way we can pass title,description in route params.In next part we will explain about Vue routing guards with Firebase authentication.
Top comments (0)