Vue路由

Vue_UI组件库

http://mint-ui.github.io/docs/#/zh-cn/quickstart

npm安装

npm i mint-ui@1 -S

CDN     

目前可以通过 unpkg.com/mint-ui@1 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>

 引入整个Mint UI

在 main.js 中写入以下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。    

安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

启动：npm run dev   

编译：npm run build

vue-router

 路由介绍:

• github: https://github.com/vuejs/vue-router

• 中文文档: http://router.vuejs.org/zh-cn/

• 安装  npm install vue-router --save
  

 vue用来实现SPA的插件

使用vue-router
        1. 创建路由器: router/index.js
          new VueRouter({
            routes: [
              { // 一般路由
                path: '/about',
                component: about
              },
              { // 自动跳转路由
                path: '/', 
                redirect: '/about'
              }
            ]
          })
        2. 注册路由器: main.js
           import router from './router'
           	new Vue({
           		router
           	})
        3. 使用路由组件标签:
           	<router-link to="/xxx">Go to XXX</router-link>
           	<router-view></router-view>

编写路由的3步

• 定义路由组件    

• 映射路由

• 编写路由2个标签

嵌套路由

children: [
            {
              path: '/home/news',
              component: news
            },
            {
              path: 'message',
              component: message
            }
         ]

向路由组件传递数据

params: <router-link to="/home/news/abc/123">
        props: <router-view msg='abc'>

 使用路由组件标签    

 <router-link>:              用来生成路由链接
    <router-link to="/xxx">Go to XXX</router-link>
    
 <router-view>: 用来显示当前路由组件界面
    <router-view></router-view>

缓存路由组件的书写方式为

<keep-alive>
          <router-view></router-view>
</keep-alive>

 相关API

•  this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

• this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

• this.$router.back(): 请求(返回)上一个记录路由

 数据绑定

•  一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会

更新

 数据劫持

• 数据劫持是 vue 中用来实现数据绑定的一种技术

数据劫持（数据绑定）的四个重要对象为  

•  Observer 是用来给数据添加Dep依赖

• Dep 是data每个对象包括子对象都拥有一个该对象, 当所绑定的数据有变更时, 通过dep.notify()通知Watcher。

•  Compile  是HTML指令解析器，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

• Watcher  是连接Observer和Compile的桥梁，Compile解析指令时会创建一个对应的Watcher并绑定update方法 , 添加到Dep对象上。

Vue数据代理的实现

• - 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符

• 所有添加的属性都包含 getter/setter

• getter/setter 内部去操作 data 中对应的属性数据

双向数据绑定

• 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的

双向数据绑定的实现流程

• 在解析 v-model 指令时, 给当前元素添加 input 监听

•  当 input 的 value 发生改变时, 将最新的值赋值给当前表达式所对应的 data 属性

 VueRouter匹配优先级

• 有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的

定义顺序：谁先定义的，谁的优先级就最高

• 正常代码逻辑应该是越往下优先级越高，但在router 上正好相反

• 下面案例两个组件都对应有一个地址，但是'sapp' 的组件在路由中最先被注册，

因此优先使用