Vue-router: Using `alias: '*'` make 404 route, an error?

[baijunjie]

Version

2.5.3

Reproduction link

http://jsfiddle.net/L7hscd8h/1405/

Steps to reproduce

Invalid

const router = new VueRouter({
  routes: [
    { path: '/', component: Home, alias: '*' }
  ]
})

Error

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
         { path: '/404', component: p404, alias: '*' }
      ]
    }
  ]
})

What is expected?

Similar to Angular

// is Angular
$urlRouterProvider.otherwise('/404');

What is actually happening?

Invalid or Error

---

I don't know how to configure 404 redirect page?
Isn't *?

---

Sorry，
Then try to use redirect can be achieved, Implements the effect。
But this way is not very elegant。
http://jsfiddle.net/L7hscd8h/1408/

I hope can through the following ways

const router = new VueRouter({
  routes: [
    { path: '/', component: parentComponent,
      children: [
        { path: '404', from: '*', component: p404 },
      ]
    }
  ]

[posva]

The star must be used in the path directly, you can add an alias of 404 if you need it 🙂

or as you said, have a redirect:

{ path: '404', component: p404 },
        { path: '*', redirect: '404' },

[baijunjie]

aliasmore in line with my expectations, because it does not change the original url, more like server rendering mode in 404。

I usually make a routing json, This file is not only used to initialize the routing, but also will be used to generate the navigation menu. because of their hierarchical structure is the same.

But the way to make 404 routing must create two paths, I have to add the code to distinguish, very inconvenient, I hope can improve it.

const router = new VueRouter({
  routes: [
    { path: '/', component: parentComponent,
      children: [
        { path: '404', from: '*', component: p404 },
      ]
    }
  ]

[posva]

In that case, use the star path: path: '*' (an alias is unnecessary as it will take any non-existant page)