How to handle non english character in vue-router as a path

Question

How to have non-English characters in path as a Url?(If not wanting to do anything with server configs!) like the example below:

https://example.com/صفحه_مورد_نظر

Vue-router does not understand non-English characters!

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/صفحه_مورد_نظر',
      name: "home",
      component: Home,
    },  
  ],
});

Answer 1

The solution is to use a built-in js function called encodeURI(). It is also helpful when dealing with non-English characters in other places like tooltips or when you hover over a link!

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/'+ encodeURI('????_????_???'),
      name: "home",
      component: Home,
    },  
  ],
});