重读Vue核心插件--router\vuex

Router

根据你发送的url，请求回对应的组件，并寻找对应的router-view位置，进行组件的渲染

？？？router-view搜索路径的方式

工做简单过程

引入vuerouter组件、定义路由（也称配置路由）、建立router实例、全局挂载路由

在全局挂载后，咱们就能够经过this.$router访问路由器

动态匹配路由

意义：对于同一组件，可是有着不一样请求参数的请求，咱们可定不能为每一参数都配置一个路由、一个组件，咱们确定要设置一个通用的路由，因此咱们提出了动态路由匹配，解决了重复配置路由的问题

在配置router的js下这么配置path
const router = new VueRouter({
    routes:[
    {path:'/user/:id', component: User}
    ]
})
复制代码

固然配置了统一的路由配置，咱们仍是要获取请求参数的，咱们这是能够经过this.$route.params来获取参数，

嵌套路由

意义：由于咱们页面是复杂的，在请求回组件中可能还嵌套着路由，为了解决这种多重路由嵌套问题，咱们要配置多重路由

简单描述

就是在路由配置下多出一个children属性，而这个属性中的内容格式和正常的路由配置格式没有区别，就是渲染的位置发生了变化

这是最顶层出口
<div id="app">
  <router-view></router-view>
</div>
这个是包含嵌套的路由
const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
路由嵌套配置
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
复制代码

对比---视图命名

提到路由嵌套咱们就要想到视图命名

由于视图命名也是一个处理返回多个组件的操做，可是不一样的是，这个操做是在一个界面上返回多个组件，因为一次返回多个组件，这就产生了顺序相关的问题，为了使组件和对应的出口完美对应，咱们能够在每一个出口进行命名操做，同时在路由配置时，也进行命名配置

<router-view name='a'></router-view>
返回组件
components: {
    a:要返回的组件
}
复制代码

编程式导航

意义：过去咱们导航的方式都是经过router-link的方式写在template中，可是有时候咱们在逻辑层面上控制路由的跳转是十分不方便的，因此咱们同时须要一种方法，使咱们能够在逻辑层面上完成导航的跳转

<router-link :to=""> 和router.push()的行为是同样的
由于咱们能够经过this.$router的方式访问到路由实例
复制代码

原理：都是向history栈中添加一条记录

路由命名

在路由中命名，能够起到和路径请求的同样的效果 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

路由重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
复制代码

辨析重定向和别名：

重定向：地址被转移了

别名：几个地址名都是同样的，都指向同一地址

路由组件传参

History模式

hash模式

因为是用hash来模拟url，因此当url改变时候，并不会真正的刷新页面

history模式则相反，它是正常的url，须要服务器的配置支持，一旦得不到资源就会显示404页面

Vuex

为了集中管理全部组件的状态

单个组件的状态管理很简单的循环：数据->视图->事件触发->数据

可是当多个组件交换状态时，这种的简单的循环就容易被破坏

例如：当多个组件依赖同一组件的状态时，组件之间的通讯会变得十分复杂

因此咱们提出一个公共的存储仓库，这个仓库的特色就是响应式的

接下来介绍Store的组成：

state

数据存放的位置

store.state的方式能够获取数据，仅需在计算属性中返回便可

mutation

存放一些方法，用于对state数据操做的方法

store.commit('increament')能够触发increament的方式