vue-router的安装和基本使用

一、什么是vue-router

• vue-router是vue.js官方路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
• vue-router是基于路由和组件的
      - 在vue-router的单页面应用中，页面的路径改变就是组件的切换
      - 路由用于设定访问路径，将路径和组件映射起来

二、vue-router的安装

1.在vue-cli2中安装vue-router
输入命令：vue init webpack xxx来安装vue-cli2，然后在vue-cli2的选项中安装vue-router。如果不知道vue-cli的兄弟们，可以去https://blog.csdn.net/csshuaige/article/details/119054066查看vue-cli的安装和使用

注意：使用命令npm install vue-router --save也可以安装vue-router

三、使用vue-router

第一步：在根目录/src/index.js文件中导入路由对象命名为VueRouter，并调用Vue.use(VueRouter)使用vuerouter对象

第二步： 在根目录/src/main.js文件中导入路由实例，并在Vue实例中挂载导入的路由实例

第三步： 根目录/src/App.vue相当于首页，然后在src/components文件夹中创建Luyou1.vue、Luyou2.vue文件，其中内容为


第四步： 在index.js中导入创建的Luyou1、Luyou2组件，并设置它们2个对应的路由映射

第五步： 创建路由实例并将路由映射对象route传入其中，最后导出路由实例router

第六步： 在App.vue中输入router-link标签，router-link是路由的超链接，点击router-link会跳转到指定路由，to属性表示要跳转的路径；router-view标签用于显示对应路由的内容

最后使用npm run dev命令运行项目
运行结果如下
首页：

点击路由导航1，地址栏和内容都发生了变化：
点击路由导航2，地址栏和内容都发生了变化：

至此vue-router的安装和基本使用就演示完毕了。

总结

1. 安装vue-router
2. 导入vue-router
3. 创建组件
4. 设置组件和路由的映射关系
5. 使用router-link和router-view来使用路由