console
const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/home', component: Home,
children: [
{ path: 'foo', component: Foo, alias: '/foo' },
{ path: 'bar', component: Bar, alias: 'bar-alias' },
{ path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] }
]
}
]
})
new Vue({
router,
el: '#app'
})
<div id="app">
<h1>Route Alias</h1>
<ul>
<li><router-link to="/foo">
/foo (renders /home/foo)
</router-link></li>
<li><router-link to="/home/bar-alias">
/home/bar-alias (renders /home/bar)
</router-link></li>
<li><router-link to="/baz">
/baz (renders /home/baz)</router-link>
</li>
<li><router-link to="/home/baz-alias">
/home/baz-alias (renders /home/baz)
</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>