vue-router简单实现

创建组件:
在components下创建home的组件
home.vue
<template>
	<div>
		<h2>我是首页</h2>
		<p>我是首页的内容</p>
	</div>
</template>

<script>
	export default{
     
		name:'home',
	}
</script>
在components下创建about的组件
about.vue
<template>
	<div>
		<h1>我是关于</h1>
		<p>我是关于的内容页</p>
	</div>
</template>

<script>
	export default{
     
		name:'about',
	}
</script>

在src目录下创建router路由文件并创建index.js文件
import Vue from 'vue'
//导入vue-router
import Router from 'vue-router'
//组件的位置
import home from '../components/Home.vue'  
import about from '../components/about.vue'

//注册
Vue.use(Router);


//配置路由
const router = new Router({
     
	routes:[
		{
     
			path:'/',       //设置路径
			name:'home',
			component: home
		},
		{
     
			path:'/home',
			name:'home',
			component: home
		},
		{
     
			path:'/about',
			name:'about',
			component: about
		},

	]	
});
//导出
export default router;

main.js文件
import Vue from 'vue'
import App from './App'
import router from './router/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import  './assets/css/reset.css'


Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false


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

App.vue文件
<template>
	<div id="app">
		<router-link to='home'>首页</router-link>
		<router-link to='/about'>关于</router-link>
		<router-view></router-view>
	</div>
</template>
<script >
import about from './components/about.vue'
import home from './components/Home.vue'

export default {
     
  name: 'App',
  components: {
     
  	about,
  	home,
  },
}

</script>