In this short article, We will learn How to get the current URL in Vue.js.
If you are using Vue without Vue Router then you need to an use window object. But, If you are using Vue Router then you can use a route object.
Read Also: How to Use Props in Vue.js
How to get the current URL in Vue JS without Vue Router
<!DOCTYPE html>
<html>
<head>
<title>How to get current URL in Vue JS - TechvBlogs</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'How to get current URL in Vue JS - TechvBlogs'
},
created: function(){
var currentUrl = window.location.pathname;
console.log(`Current URL => ${currentUrl}`);
}
})
</script>
</body>
</html>
How to get the current URL in Vue JS with Vue Router
<script>
export default {
created(){
console.log(this.$route.query.page)
}
}
</script>
Thank you for reading this blog.
Read Also: How To Install Vue 3 in Laravel 9 with Vite
If you want to manage your VPS / VM Server without touching the command line go and Checkout this link. ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a matter of minutes. You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.
