vue2.0学习之路由

下载vue-router: cnpm install vue-router --save

router/main.js

/*引入所需要的组件*/
	import VueRouter from 'vue-router';
	import about from "compontents/about.vue"
	import news from "compontents/news.vue"
	import Router from 'vue-router'
	import VueResource from 'vue-resource';

	Vue.use(VueRouter);
	Vue.use(VueResource);
	Vue.use(Router);

	const routes = [ //这里是routes，没有r
	  { path: '/goods', component: goods },
	  { path: '/ratings', component: ratings },
	  { path: '/seller', component: seller }
	];
	const router = new VueRouter({
	  routes,
	  linkActiveClass:'active'
	});
	router.push('/goods');

	new Vue({
		el:'#app',
		router,
		template:'<App/>',
		components: { App }
	})

　　compontents/about.vue 与compontents/news.vue 一样

<template>
	<div>
		我是关于我们/我是新闻
	</div>
</template>

<script>
	export default {

	}
</script>

　　将about.vue和news.vue链接起来

<template>
	<div id="app">
		<div class="tab">
			<div class="tab-item">
				<router-link to="/about">关于</router-link>
			</div>
			<div class="tab-item">
				<router-link to="/news">新闻</router-link>
			</div>
		</div>
		<div>
			<router-view></router-view>
		</div>
	</div>
</template>