Getting the current route path in Vue
In this tutorial, we will learn about how to get the current route path in Vue router.
We can use this.$router.currentRoute.path property in a vue router component to get the current path.
Example:
Post.vue
<template>
<div>
<h1>Post page</h1>
</div>
</template>
<script>
export default {
created() {
console.log(this.$router.currentRoute.path); // path is /post }
};
</script>Inside the vue template, you access it like this.
<template>
<div>
<h1>current path is {{$router.currentRoute.path}}</h1> </div>
</template>Similarly, you can also use this.$route.path property.
Post.vue
<template>
<div>
<h1>Post page</h1>
<p>current path is {{$route.path}}</p> </div>
</template>
<script>
export default {
created() {
console.log(this.$route.path); // path is /post }
};
</script>- Share:
