vue不定時更新之全家桶基礎應用

1.vue-router

跳轉頁面功能

router-view 嵌套路由，加深項目層級

1 vue2.1.0 新增include/exclude 2 <template>
3      <div>
4          <keep-alive include="a,b,c">     //緩存包括 name 爲 a,b,c 的組件，也可正則匹配     :include="reg"        
5              <router-view></>
6          </keep-alive>
7      </div>
8 </template>

 

router-link 映射路由，相似標籤 a

1 <router-link to="/index"></router-link>

 

編程式導航 this.$router.push 與 router-link 相同

 1 <template>
 2     <div>
 3         <button @click="to"></button>
 4     </div>
 5 </template>
 6 <script>
 7     export default {
 8         methods: {
 9             to () {
10                  this.$router.push({name: 'article'，id:'自定義'})  
11             }
12         }
13     }
14 </script>                                

 

this.$router.push 傳參，適合非父子直接傳遞數據用。注：非父子組件傳遞不建議用 bus event，請使用 vuex

// 字符串,這裏的字符串是路徑path匹配噢，不是router配置裏的name
this.$router.push('home')

// 對象
this.$router.push({ path: 'home' })

// 命名的路由 這裏會變成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數，變成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

 

 1 //路由配置
 2 export default new Router({
 3     routers: [
 4          { name:'home', path:'/home',compontent:Home}
 5     ]
 6 })
 7 
 8 //經過 name 獲取頁面，傳遞 params
 9 this.$router.push({ name:'home', params:{ userId: this.arg1}});
10 this.$router.push({ path:'/home', query:{ index: index, row: row}})
11
12 //目標頁面
13 {{this.$route.params.userId}} 或 {{this.$route.query.row.XXX}}

 

動態參數應用

router\index.js 中路由組件映射

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Article from 'article路徑'
 4 Vue.use(Router)
 5 const router = new Router({
 6     routes: [
 7         {
 8           path: '/article/:id.html',   //動態參數 id，前端可以使用 this.$route.params.id 獲取，node 可以使用 req.params.id 獲取
 9           name: 'article',
10           component: Article
11         }
12     ]
13 })
14 export default router

router-link 動態映射+事件 native，注：路由傳參如 key 沒有要求必定在 router/index.js 中顯示 path：'/:id/:random'

<router-link :to="{name:'article', params{id:自定義字符,key:XXX,random:XXX}， path: 'balabala'}" @click.native='meth'></router-link>  /* 路由添加事件要加個native */

 

Get請求傳參

樣例：http://localhost:8080/linkParamsQuestion?age=18

獲取：

let age = this.$route.query.age; //問號後面參數會被封裝進 this.$route.query;

 

路由監聽

 1 export default {
 2     watch : {
 3           '$route':'meth' //監聽方法meth
 4     },
 5     methods :{
 6         meth () {
 7            if(this.$route.path==='/'||this.$route.path==='/login')                {
 8             console.log('change')
 9         }else{
10             console.log('nochange')
11         }
12     }
13 }                

 

導航鉤子

導航鉤子函數，主要是在導航跳轉的時候作一些操做，好比能夠作登陸的攔截，權限校驗，而鉤子函數根據其生效的範圍能夠分爲 全局鉤子函數、路由獨享鉤子函數和組件內鉤子函數。

全局鉤子函數

能夠直接在路由配置文件router.js裏編寫代碼邏輯。能夠作一些全局性的路由攔截。

router.beforeEach((to, from, next)=>{
  //do something
  next();
});
router.afterEach((to, from, next) => {
    console.log(to.path);
});

每一個鉤子方法接收三個參數：

• to: Route: 即將要進入的目標 路由對象

• from: Route: 當前導航正要離開的路由

• next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

• next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

  • next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

確保要調用 next 方法，不然鉤子就不會被 resolved。

路由獨享鉤子函數

能夠作一些單個路由的跳轉攔截。在配置文件編寫代碼便可

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

組件內鉤子函數

更細粒度的路由攔截，只針對一個進入某一個組件的攔截。

 

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當鉤子執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}

 

鉤子滾動行爲

scrollBehavior 方法接收 to 和 from 路由對象。
第三個參數 savedPosition 當且僅當 popstate 導航 (mode爲 history 經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。
這裏就不細緻的講了，文檔都有也很是簡單，記住有這個東西就行。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
  }
})

//全部路由新頁面滾動到頂部： scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } //若是有錨點 scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } }

 

路由元信息

這個概念很是簡單，就是在路由配置裏有個屬性叫 meta，它的數據結構是一個對象。你能夠放一些key-value進去，方便在鉤子函數執行的時候用。
舉個例子，你要配置哪幾個頁面須要登陸的時候，你能夠在meta中加入一個 requiresAuth標誌位。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }
    }
  ]
})

而後在 全局鉤子函數 beforeEach中去校驗目標頁面是否須要登陸。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //校驗這個目標頁面是否須要登陸
    if (!auth.loggedIn()) {  
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保必定要調用 next()
  }
})

這個auth.loggedIn 方法是外部引入的，你能夠先寫好一個校驗是否登陸的方法，再import進 router.js中去判斷。

2.other

vue 請求返回狀態碼 304 緣由之一：可能使用了 keep-alive 緩存

 

3.數據傳遞，數據監聽與改變

https://blog.csdn.net/lander_xiong/article/details/79018737   組件通訊

https://cn.vuejs.org/v2/guide/components-props.html

1.子組件獲取父組件數據，props

2.子組件觸發父組件方法，$emit 觸發，@監聽

3.父組件觸發子組件屬性和方法，註冊ref