{"id":13443,"date":"2025-09-11T06:58:34","date_gmt":"2025-09-11T06:58:34","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13443"},"modified":"2025-09-11T06:58:34","modified_gmt":"2025-09-11T06:58:34","slug":"get-the-current-route-name","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/get-the-current-route-name","title":{"rendered":"Get the Current Name of Route in Vue"},"content":{"rendered":"<h2>Purpose<\/h2>\n<p>To get the current route name in a Vue application using Vue Router.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>Vue Router must be properly configured in your project.<\/li>\n<li>Routes must include a name field.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nlet obj = {\r\n path: '\/about',\r\n name: 'About',\r\n component: About\r\n}\r\n<\/pre>\n<h2>Vue 3 (Composition API)<\/h2>\n<ul>\n<li>Use the useRoute() function from vue-router.<\/li>\n<li>route.name gives the name of the current route.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nimport { useRoute } from 'vue-router'\r\nconst route = useRoute()\r\nconsole.log(route.name)\r\n<\/pre>\n<h2>Vue 2 (Options API)<\/h2>\n<p>Use $route.name inside the component context.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\nexport default {\r\n mounted() {\r\n   console.log(this.$route.name)\r\n }\r\n}\r\n<\/pre>\n<h3>Notes<\/h3>\n<p>The route name is useful for navigation, conditionals, analytics, and breadcrumbs.<br \/>\nIf name is not defined in the route config, it will return undefined.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/top-21-amazing-vuejs-projects\" target=\"_blank\">VueJs Projects<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Purpose To get the current route name in a Vue application using Vue Router. Prerequisites Vue Router must be properly configured in your project. Routes must include a name field. let obj = { path: &#8216;\/about&#8217;, name: &#8216;About&#8217;, component: About } Vue 3 (Composition API) Use the useRoute() function from vue-router. route.name gives the name [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-13443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13443"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13443"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13443\/revisions"}],"predecessor-version":[{"id":13445,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13443\/revisions\/13445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13444"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}