[Vuejs]-In vue router, If it is possible to use dynamic routering using HTML5 history mode?

by

0👍

I don’t really understand your question, but…

You can show your actual url id using "$router.params".

Of course, you can also access it from your vue component script.

Example:

//Actual URL: www.example.com/10101010

<template>
   <div>
      actual id: {{$router.param.id}}
      <!--this shows 10101010-->
   </div>
</template>

For more information you should check: https://router.vuejs.org/guide/essentials/dynamic-matching.html

0👍

There are two things you need to do. First, major changes on client-side code and one minor change on server-side to enable true HTML5 routing experience.

First, the client side changes. Design a route to catch the dynamic route fragments i.e. Path parameters and write a component to handle the route.

const MyComponent = Vue.component('MyComponent ', {

  mounted() {
    // If path is www.example.com/1234, then id will be 1234
    const id = $route.params.id;

    // Make API call to get some data.
    makeSomeAPICall(id)
      .then(data => console.log(data));
  }

});


const routes = [
  { path: '/:id', component: MyComponent }
];

const router = new VueRouter({ routes });

One last thing you need to handle on back-end side. With SPA application, when user directly hits the page like this https://www.example.com/10101010, the backend router will try to find route /10101010 for which the back-end actually has no knowledge since the route is defined by client-side code.

The simplest way is to add catch all route on back-end which when executed will always send your application’s main index.html file. Something like Express.js middleware would help.

Leave a comment