基于vue-cli的vue项目之路由6--重定向1-----路径无参重定向

有时候可能会觉得使用path太过于方便，而比较喜欢想使用路径，以及设置其他参数的方法，个人比较喜欢这种复杂点的

1.hello.vue子界面：用来显示的子界面
<template>
	<div class="hello">
		<h1>这个是hello.vue页面</h1>
		<h2></h2>
	</div>
</template>
<script>
	export default {
		name: 'hello',
	}
</script>

2.router/index.js：路由配置文件,关键在于第二十八到第三十四行
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
	routes: [
	{
		path: '/hello',
		component: require('../components/Hello.vue'),
	},
	{
		path: '/foo',
		component: require('../components/foo.vue'),
	},
	{
		path:'*',
		redirect:{
			path:'/foo',
			components:require('../components/foo.vue'),
		}
	}
	]
})
export default router;

3.app.vue:主界面
<template>
	<div id="app">
		<!-- <hello></hello> -->
		<div class="nav">
			<ul>
				<li>
					<router-link to="/hello">hello页面</router-link>
				</li>
				<li>
					<router-link to="/foo">foo页面</router-link>
				</li>
			</ul>
		</div>
		<div class="main">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'app',
		components: {},
	}
</script>
<style>
	body {background-color: #f8f8ff;font-family: 'Avenir', Helvetica, Arial, sans-serif;color: #2c3e50;}
	.nav {position: fixed;width: 108px;left: 40px;}
	.nav ul {list-style: none;margin: 0;padding: 0;}
	.nav ul li {width: 108px;height: 48px;line-height: 48px;border: 1px solid #dadada;text-align: center;	}
	.nav ul li a {display: block;position: relative;text-decoration: none;}
	.nav ul li img {position: absolute;	left: 0;top: 0;	width: 100px;height: 30px;}
	.main {	height: 400px;margin-left: 180px;margin-right: 25px;}
</style>

main.js:配置路由路径
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter);
new Vue({
	el: '#app',
	router,
	render: h => h(App)
})

效果差不多，就不说了