console
const Home = { template: '<router-view></router-view>' }
const Default = { template: '<div>default</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const WithParams = { template: '<div>{{ $route.params.id }}</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home,
children: [
{ path: '', component: Default },
{ path: 'foo', component: Foo},
{ path: 'bar', component: Bar },
{ path: 'baz', name: 'baz', component: Baz },
{ path: 'with-params/:id', component: WithParams },
{ path: 'relative-redirect', redirect: 'foo' }
]
},
{ path: '/absolute-redirect', redirect: '/bar' },
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, params, query } = to
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
},
{ path: '/named-redirect', redirect: { name: 'baz' }},
{ path: '/redirect-with-params/:id', redirect: '/with-params/:id' },
{ path: '*', redirect: '/' }
]
})
new Vue({
router,
el: '#app'
})
<div id="app">
<h1>Redirect</h1>
<ul>
<li><router-link to="/relative-redirect">
/relative-redirect (redirects to /foo)
</router-link></li>
<li><router-link to="/relative-redirect?foo=bar">
/relative-redirect?foo=bar (redirects to /foo?foo=bar)
</router-link></li>
<li><router-link to="/absolute-redirect">
/absolute-redirect (redirects to /bar)
</router-link></li>
<li><router-link to="/dynamic-redirect">
/dynamic-redirect (redirects to /bar)
</router-link></li>
<li><router-link to="/dynamic-redirect/123">
/dynamic-redirect/123 (redirects to /with-params/123)
</router-link></li>
<li><router-link to="/dynamic-redirect?to=foo">
/dynamic-redirect?to=foo (redirects to /foo)
</router-link></li>
<li><router-link to="/dynamic-redirect#baz">
/dynamic-redirect#baz (redirects to /baz)
</router-link></li>
<li><router-link to="/named-redirect">
/named-redirect (redirects to /baz)
</router-link></li>
<li><router-link to="/redirect-with-params/123">
/redirect-with-params/123 (redirects to /with-params/123)
</router-link></li>
<li><router-link to="/not-found">
/not-found (redirects to /)
</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>