vue實際應用vue-router

當從不一樣組件進入同一個組件的時候，想要作對不一樣組件作出對應的改變使用

watch: {
    '$route' (to, from) {
      // 對路由變化做出響應 寫對應的業務邏輯便可...
    }
  }
  或者
    beforeRouteUpdate (to, from, next) {
   // 對路由變化做出響應 寫對應的業務邏輯便可...
    // don't forget to call next() //想進入下個路由調用next()； } 複製代碼

路由鉤子函數的用處

router.beforeEach((to, from, next) => {
  let memberRole = Vm.$cookie('memberRole');
  //在全局定一個權限判斷的鉤子，經過獲取的cooike值來判斷身份
  Vm.$bus.memberRole = memberRole;
      if(to.fullPath==='/memberRole'){

        if(memberRole==='1'){
          //超管
          next({ path: '/superAdmins' })
          // vueRouter.push({name: '/superAdmins'})
        }else if(memberRole==='2'){
          //平臺
          next({ path: '/platformPrent' })
          // vueRouter.push({name: 'login'})
        }else if(memberRole==='3'){
          //商家
          next({ path: '/superPrent' })
        }else{
          // vueRouter.push({name: 'login'})
          //普通用戶
          next()
        }
      }else{
        next()
      }
});

router.afterEach((to, from) => {
 
 // 同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用
})
//獨享守衛
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ... 只針對foo進行監聽
      }
    }
  ]
})
//組件內的路由鉤子
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    //進入前實例前階段
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    //從不一樣路由跳轉來的監聽
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}
總結 路由鉤子就是用來判斷不一樣狀態的一種手段。相似看門的有啥事能夠先問他，由他轉告以後才能進行操做
複製代碼

官方解釋的解析流程

• 導航被觸發。
• 在失活的組件裏調用離開守衛。
• 調用全局的 beforeEach 守衛。
• 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
• 在路由配置裏調用 beforeEnter。
• 解析異步路由組件。
• 在被激活的組件裏調用 beforeRouteEnter。
• 調用全局的 beforeResolve 守衛 (2.5+)。
• 導航被確認。
• 調用全局的 afterEach 鉤子。
• 觸發 DOM 更新。
• 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

實際開發根本用不上，可是面試的毛病多愛問，想答就答不想答就不答，愛咋咋地

路由嵌套

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
        }
      ]
    }
  ]
})
複製代碼

主要作後臺系統不一樣角色嵌套的子集

路由懶加載

const Foo = () => import('./Foo.vue')
//分塊懶加載
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

對於優化項目比較有用，分塊懶加載，打包好拆分
複製代碼

vue-router路由的兩種模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。
和後臺配合更改配置，若是使用ssr的時候須要用到這種模式。線上環境最好也改爲這樣看起來比較好用戶輸入帶井號很醜。

history路由模式與後臺的配合

# nginx
location / {
  try_files $uri $uri/ /index.html;
}
# node 
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})
複製代碼

vue-router的動態路由匹配以及使用

路由的動態匹配有不少種，能夠經過跳轉到路由所傳的參數來動態改變路由狀態，能夠經過導航守衛監聽路由狀態，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。

{
  // 會匹配全部路徑
  path: '*'
}
{
  // 會匹配以 `/user-` 開頭的任意路徑
  path: '/user-*'
}

複製代碼

router-link組件及其屬性

1.":to" 屬 性

至關於a標籤中的"herf"屬性，後面跟跳轉連接所用

Home

Home 2."replace" 屬 性

replace在routre-link標籤中添加後，頁面切換時不會留下歷史記錄

3."tag" 屬 性

具備tag屬性的router-link會被渲染成相應的標籤

Home

Home

此時頁面的li一樣會起到a連接跳轉的結果，vue會自動爲其綁定點擊事件，並跳轉頁面

4."active-class" 屬 性

這個屬性是設置激活連接時class屬性，也就是當前頁面全部與當前地址所匹配的的連接都會被添加class屬性

Home active-class屬性的默認值是router-link-active,因此若是沒有設置，就會被渲染爲這個class

能夠在router.js裏面設置

const router = new VueRouter({ mode: 'hash', linkActiveClass: 'u-link--Active', // 這是連接激活時的class }) 5."exact" 屬 性

開啓router-link的嚴格模式

home 上面這個標籤若是不加exact屬性，則會在vue2.leenty.com/article頁面下也會被匹配到， 這卻不是咱們的本意,在加了這個屬性後就會正確的匹配到vue2.leenty.com下

路由傳參

1，this.$router.push({ path: '/news', query: { userId: 123 }});  this.$route.query.userId
2, <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link> <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
3,props: ['id'],傳參，可使用對象，布爾，函數模式 耦合性下降
複製代碼