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个组件，都以这个结构创建

组件结构

    在<router-link>内通过名称引入路由需要向to属性传入一个对象显示声明路由的名称:

引入路由

    vue-router提供了两个指令来处理导航和自动渲染逻辑：

    按照这个规则，我们在App.vue中修改页面，配置路由导航和渲染的视图组件。

修改模板

    finally，我们npm run dev跑一下

页面效果

    点击item会触发该item的router-link继而导航，渲染router-view组件展示，刚才点击了小猪组件，router-view渲染出了Pig.vue组件~

（￣︶￣）↗