基于vue-cli的vue项目之路由1--最基本的使用

代码如下，下面是嘴简单的基础搭配：

1.第一个子页面
./components/hello.vue
		<template>
	<div class="hello">
		<h1>这个是hello页面</h1>
		<h2></h2>
	</div>
</template>
<script>
	export default {
		name: "hello",
		data() {
			return {
				msg: "this is the hello页面"
			}
		},
		props: ["logo"]
	}
</script>
2.第二个子页面
./components/foo.vue
<template>
	<div class="hello">
		<h1>这个是foo页面</h1>
		<h2></h2>

	</div>
</template>
<script>
	export default {
		name: "hello",
		data() {
			return {
				msg: "这个是foo.vue页面"
			}
		},
		props: ["logo"]
	}
</script>
3.配置router的index文件
./src/router/index//路由的配置文件使用use方法，
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: "/hello" },//配置默认页面路径
	]
})
export default router;

4.配置app.vue
./src/App.vue//配置vue的主界面。使用router-view以及router-link
<template>
	<div id="app">
		<!-- <hello></hello> -->
		<div class="nav">
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<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 {
		text-decoration: none;
	}
	.main {
		height: 400px;
		margin-left: 180px;
		margin-right: 25px;
	}
</style>
5.配置main.js//
./src/main.js//配置基础的文件路径，以及使用路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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)
})

运行效果是这样的：