vue-router

第一部分： 安装vue-router

	npm install vue-router --save -dev
	cnpm install vue-router --save -dev
	yarn add vue-router

如果在安装vue-cli的时候，已经选择了vue-router，就不需要在单独安装了

第二部分： 解读router/index.js文件

import Vue from 'vue'			//引入vue    
import Router from 'vue-router'		// 引入vue-router		
import Home from '@components/home'	//引入根文件下的vue文件
Vue.use(Router)		//vue全局使用vue-router
export defalut new Router {		//全局到处
	routers: [	//配置路由，这里是个数组
		{	//每一个链接（路由）都是一个单独的对象
			path:'/',	//链接（路由）路径 这个‘/’代表首页
			name:'Home',	// 路由名称
			component:Home	// 对应的路由模板
		}
	]
}

第三部分： 使用方法 我们在router/index.js文件中引入了vue文件的路径，并且完成了路由的配置，那么在此vue文件中，完整步骤，如下操作：

//hello.vue文件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
<style scoped>

</style>

	// router/index.js文件
	import Hello from '@/components/hello.vue'
	// 同时新增一个单独的路由对象
	{
		path:'/hello',
		name:'Hello',
		component:Hello
}

第四部分： 展示整体，router/index.js文件代码

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/hello'  //引入根目录下的Hello.vue组件
import Home from '@/components/home' 

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  outers: [	//配置路由，这里是个数组
		{	//每一个链接（路由）都是一个单独的对象
			path:'/',	//链接（路由）路径 这个‘/’代表首页
			name:'Home',	// 路由名称
			component:Home	// 对应的路由模板
		},
		{
		path:'/hello',
		name:'Hello',
		component:Hello
		}
	]
})