title: Is there a way to remove a directory from a dynamic URL using Vue-Router?
body: <p>I've build a vue.js web app for an insurance brokerage where every agent has their own website that is generated from their profiles.</p>
  
  <p>This is what the link looks like in my vue-router index file"</p>
  
  <pre><code>{
    path: '/agents/:id',
    name: 'AgentSite',
    component: AgentSite
  },
  </code></pre>
  
  <p>Everything works great EXCEPT that the urls are getting too long to fit on some business cards. I would like to change the URLs to be like this:</p>
  
  <pre><code>{
    path: '/:id',
    name: 'AgentSite',
    component: AgentSite
  },
  </code></pre>
  
  <p>However, then every other bit of dynamic content in the app loads our agent website template (AgentSite). Quotes, Clients, Policies... they won't load properly.</p>
  
  <p>Is there a way to remove the "/agents" from the URLs without messing up the rest of our application? I could shorten it to "/a/:id but that ends up being more confusing than it's worth.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: a couple of people have mentioned solutions that work when the agent id is a number. That's a great idea except that we have built agent "slugs" to use instead.</p>
  
  <p>On the agent website layout:</p>
  
  <pre><code>created() {
      console.log(this.$route.params.id);
      this.$store.dispatch("getAgentFromSlug", this.$route.params.id);
    }
  </code></pre>
  
  <p>and in the store:</p>
  
  <pre><code>getAgentFromSlug({commit}, payload){
    const db = firebase.database();
    db.ref("users/").orderByChild("slug").equalTo(payload).once("value", 
  (snap) =&gt; {
      console.log(snap.val());
      var info = snap.val();
      commit("setAgentSiteInfo", info[Object.keys(info)[0]])
    })
  }
  </code></pre>
  
  <p>So, our route Id is really a slug.</p>