vue-router学习
vue-router是官方提供的路由工具库。
将单页程序分割为各自功能合理的组件或者页面，路由起到连接单页程序中各页面之间的链条。
安装
文章图片
安装命令行 vue-router是一个Vue插件，需要在Vue全局引用中通过Vue.use()接入到Vue实例中。
路由配置
vue-router配合组件形成各种的"页面"。页面是一个抽象的概念，用于划分场景，组件是页面在Vue的具体实现方式。
新建一个js文件专门配置路由（方便我们维护）：
文章图片
新建js文件配置router 导出一个VueRouter实例，将path路由指定组件路径，base:_dirname是设置我们的基路径。
文章图片
统一配置route的js文件 创建VueRouter实例时用了mode：history的参数。意为使用history模式，该模式利用history.pushState API来完成URL的跳转还无需重新加载界面。如果不使用history模式，当访问home的时候地址就会变为：
http://localhost/#home
反之为：
http://localhost//home
这就是history模式和hash模式的区别了，其实有三种模式(⊙o⊙)…
跑远了跑远了。。。
接着说component指定组件，name是我们用的“命名路由”，就是通过路由的名称取代url的直接引用，这样如果变更可以最简化我们的维护。
demo中我创建了猫狗鱼猪4个组件，都以这个结构创建
文章图片
组件结构 在
文章图片
引入路由 vue-router提供了两个指令来处理导航和自动渲染逻辑：
文章图片
按照这个规则，我们在App.vue中修改页面，配置路由导航和渲染的视图组件。
文章图片
修改模板 finally，我们npm run dev跑一下
文章图片
页面效果 点击item会触发该item的router-link继而导航，渲染router-view组件展示，刚才点击了小猪组件，router-view渲染出了Pig.vue组件~
【vue-router学习】（￣︶￣）↗
推荐阅读
- 由浅入深理解AOP
- 继续努力，自主学习家庭Day135(20181015）
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习
- 【韩语学习】（韩语随堂笔记整理）
- 焦点学习田源分享第267天《来访》