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>