SOURCE

console 命令行工具 X clear

                    
>
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({
	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'
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<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>