Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

May I have multiple alias in Vue's router for an specific route?

The thing is the following, while alias for now covers my needs perfectly, I wonder how to declare multiple aliases for a path, so, would something like this work? Example:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      alias: ['/home', '/home2', '/homeN']
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})  

By this I mean, is it the recommended way to do so? Is there a better practice for that in Vue router?

like image 779
sab Avatar asked Oct 19 '18 16:10

sab


People also ask

What is redirect in VUE router?

A redirect means when the user visits /home , the URL will be replaced by / , and then matched as / . But what is an alias? An alias of / as /home means when the user visits /home , the URL remains /home , but it will be matched as if the user is visiting / .

How can you redirect to another page in VUE JS?

You can use $router. push({ name: "yourroutename"}) or just router. push("yourroutename") now to redirect.

How does router view work?

Router-viewIt's basically the view where the components are rendered. It's like the main div that contains all the components, and it returns the component that match the current route.


1 Answers

This is fine, they even have an official example doing it.

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/root', component: Root, alias: '/root-alias' },
    { path: '/home', component: Home,
      children: [
        // absolute alias
        { path: 'foo', component: Foo, alias: '/foo' },
        // relative alias (alias to /home/bar-alias)
        { path: 'bar', component: Bar, alias: 'bar-alias' },
        // multiple aliases
        { path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] },
        // default child route with empty string as alias.
        { path: 'default', component: Default, alias: '' },
        // nested alias
        { path: 'nested', component: Nested, alias: 'nested-alias',
          children: [
            { path: 'foo', component: NestedFoo }
          ]
        }
      ]
    }
  ]
});

If you're more worried about misspellings then you could potentially just use a navigation guard on a * wildcard path that redirects based on substrings of the route path.

like image 74
Steven B. Avatar answered Oct 10 '22 22:10

Steven B.