vue-router的安装

上文讲了前端路由的概念。其实三大框架都有自己前端路由的实现。

Vue对应vue-router
React对应ReactRouter
angular对应ngRouter

vue-router本质是一个vue的一个官方插件。它的作用就是处理路径和组件之间的映射关系，路径的改变对应进行组件的切换。

安装方法

安装指令：

npm install vue-router --save

很显然，这是一个运行时依赖

配置vue-router

由于我们用cli2初始化项目的时候，我下载了vue-router.它也默认帮助我们配置了vue-router。文件就在src/router，这个文件就是vue-router的配置。配置vue-router，其实也不是很难。

第一步，需要使用Vue.use()方法安装。Vue如果要使用任何插件，都要通过这个方法将其安装。

//给Vue安装vue-router插件
import  Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

第二步，创建一个路由实例

//
let RM = new Router({
routes:[]
});

创建实例都是要传参的，比如创建vue实例，路由实例也不例外。路由实例同样传入的是一个对象，这个对象有个最重要的属性就是routes,这个routes属性对应的是一个数组！这个数组就是路径和组件的映射关系。

routes:[
		{
        path:"/",//路径
        component:HelloWorld//组件
	}
]

第三步，使用路由实例
在vue实例中挂载路由实例。

//router/index.js中应该导出路由实例
export default RM;
//main.js
import  RM  from "router"
new Vue({
RM
})

实际情况跟我的伪代码一摸一样。这里有个细节，直接import router from "./router"为什么可以直接找到route/index.js，因为存在一个语法糖，当你的导入文件是个文件夹，它默认导入文件夹下面的index.js文件

使用vue-router

先明确我们已经做好的事儿：1.安装配置好了vue-router 2. 创建了vue-router的实例，并将其挂载到了根实例上。接下来我们要做的事儿很重要就是**配置路径和组件的关系表。也就是我们的routes数组 **

配置路径和组件的关系表

每一组映射对应数组的一个元素，元素是一个对象，有两个最重要的属性，path和component。其实意思很简单，当你的路径是path的时候，加载相应的component。那我们肯定要生成并导入这些组件，在这里，我直接导入了Home组件和About组件。(内容很普通就是在模板中加了一个h1标签)

更改路径和加载相应组件

这个需要用到两个全局组件：router-link和router-view.这两个组件各有用处。

切换url

现在我们要实现的就是要切换url，加载相应组件。那么怎么切换url呢？肯定不是在地址栏输入url回车。这样肯定会刷新页面，发生数据请求。我们要实现的是改变url，不刷新页面，不发生数据请求。之前我们说过，是通过location.hash实现或者通过history模式实现。**这里我们是使用router-link组件来实现，**它的本质还是使用上述两种方式实现的。router-link是一个vue-router全局组件，可以在任何地方用它，他会被渲染成一个a标签。我们可以在app.vue中使用它。它的to属性就类似a标签的href属性一样，决定它切换到哪个path。

加载对应组件

现在我们的url切换实现好了，按照routes的原则，当我们点击首页，应该给我们加载Home组件。当我们点击关于，应该给我们加载About组件。那么这个组件加载到哪个位置呢？这就要用到另一个全局组件了router-view。这个全局组件就是用来占位的，很容易理解。当我们点击首页，Home组件加载出来，替换router-view的位置。当我们再点击关于，就会给我们销毁Home组件，从而加载About组件，替换router-view的位置。

vue-router--安装vue-router