How to get current URL in Vue JS - TechvBlogs

How to get current URL in Vue JS

In this article, We will learn How to Get the Current URL in Vue.js.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

1 week ago

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 linkServerAvatar 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.

Comments (0)

ServerAvatar
Multiple sites on a single VPS/VM/Server Deploy PHP sites on cloud in minutes, simple as that!
ServerAvatar
Generate Free SSL Certificate - SSLForWeb

Generate Free SSL Certificate

  • 90-Day Certificates
  • SSL Monitoring
  • Wildcard Certificates
  • Multiple Domains
  • Certificate Management
  • Expiration Reminders

Comment


Note: All Input Fields are required.