重讀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的方式