vue-router-官網

 

  vue-router：

vue router功能：
    嵌套的路由/視圖表
    模塊化的/基於組件的路由配置
    路由參數/查詢/通配符
    基於vue.js過渡系統的視圖過渡效果
    細粒度的導航控制
    帶有自動激活的css class的連接
    h5歷史模式或hash模式，在IE9中自動降級
    自定義的滾動條行爲


<router-view> 是最頂層的出口，渲染最高級路由匹配到的組件。一樣地，一個被渲染組件一樣能夠包含本身的嵌套 <router-view>


以/開頭的嵌套路徑會被看成根路徑，則使用嵌套路徑無須設置嵌套的路徑。

　　vue-router傳參：

router傳參方式：路由匹配參數；query方式傳參；params方式傳參；
(1)動態路由匹配,路由匹配參數：
     // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
    // 獲取參數
     let name = this.$route.params.id; // 連接裏的id被封裝進了 this.$route.params       
  (2) query  
     this.$router.push('/login/' + this.id);
     this.$route.query.id 
    
    this.$router.push({
      path: '/payment/recharge',
      query: {
        amount: that.amount
      }
    });
    this.$route.query.amount
    
    徹底能夠在連接後加上?進行傳參 
    http://localhost:8080/?id=18
    this.$route.query.id
    
   (3) params
    this.$router.push({
      name: '確認圖片',
      params: {
       amount: that.amount
      }
    })
    this.$route.params.amount 

ps：若提供了path，則params會被忽略

 $router && $route：

 $router:router實例，用於路由跳轉，
(1)this.$router.push({
      path: '/payment/recharge',
      query: {
        amount: that.amount
      }
    });
(2)this.$router.push({
      name: '確認圖片',
      params: {
       amount: that.amount
      }
    })
    
$route:當前激活的路由信息對象，用於獲取參數，
(1)this.$route.query.amount
(2)this.$route.params.amount 

　　嵌套路由：

嵌套路由：
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
        }
      ]
    }
  ]
})

　編程式導航：：

導航方式：
（1）<router-link>建立a標籤來定義導航連接（聲明式導航）
（2）router.push(location, onComplete?,onAbort?) (編程式導航)
（3）router.replace(location, onComplete?,onAbort?) (編程式導航)
（3）router.go(n) (編程式導航)

 ps：想要導航到不一樣的URL，則使用router.push方法，該方法會向history棧添加一個新的記錄，當用戶點擊瀏覽器回退按鈕時則回到以前的url。   
 該方法的參數能夠是一個字符串路徑或者一個描述地址的對象。router.replace不會向history添加新記錄，只是替換當前的history記錄。
 router.go在history記錄中向前或向後後退多少步。
 
 // 字符串,路徑path匹配
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由 /register/userId=123
router.push({ name: 'user', params: { id: '1' }})
// 帶查詢參數，變成 /register?id=1
router.push({ path: 'register', query: { id: '1' }})        
ps：若提供了path，則params會被忽略

　　命名路由：

在建立router實例的時候，在routes配置中給某個路由設置名稱。
const router = new VueRouter({
    routes: [
        {
            path:'/user/:userId',
            name:'user',
            component:User
        }
    ]
})
// 連接到命名路由方式（1）給router-link的to屬性傳遞一個對象（2）給router.push傳遞一個對象
<router-link :to="{name:'user', params:{userId:123}}">User</router-link>
router.push({name:'user', params: {userId:123}})

　　重定向：

重定向:
    { path: '/a', redirect: '/b' }
    { path: '/a', redirect: { name: 'foo' }}

　　導航守衛：

導航守衛：主要用來經過跳轉或取消的方式守衛導航。登陸的攔截,權限的校驗,等
ps：參數或查詢的改變並不會觸發進入或離開的導航守衛。能夠經過$route對象來應對這些變化或使用beforeRouteUpdate的組件內守衛。

全局前置守衛：
const router = new VueRouter({...})
router.beforeEach((to, from, next)=>{
    next()
})
ps:必定要調用next方法來resolve這個鉤子，執行效果依賴next方法的調用參數。進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed 
next(false) 中斷當前導航，能夠判斷某些條件下如url改變了則中斷，url會重置到from路由對應的地址；
next('/) next({path:'/'}) 跳轉到一個不一樣的地址，當前導航被中斷，而後進行一個新的導航；

全局後置鉤子：
const router = new VueRouter({...})
router.afterEach((to, from, next)=>{
})

路由獨享的守衛：
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`
  }
}



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

　　路由元信息：

路由元信息：路由配置裏的一個屬性meta，其是一個對象，能夠存放一些key-value，經過路由元信息meta實現不一樣路由展示不一樣頁面（帶不一樣的meta信息，展現不一樣頁面佈局）
routes 配置中的每一個路由對象爲 路由記錄。路由記錄能夠是嵌套的，所以，當一個路由匹配成功後，他可能匹配多個路由記錄
例如，根據上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。
一個路由匹配到的全部路由記錄會暴露爲 $route 對象 (還有在導航守衛中的路由對象) 的 $route.matched 數組。所以，咱們須要遍歷 $route.matched 來檢查路由記錄中的 meta 字段

直接在路由配置的時候，給每一個路由添加一個自定義的meta對象，在meta對象中能夠設置一些狀態，來進行一些操做。用它來作登陸校驗再合適不過了。

　　路由懶加載：

路由懶加載：
當打包構建應用時，JavaScript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，能提升頁面的訪問速度。
路由和組件的經常使用兩種懶加載方式：
1.vue異步組件實現路由懶加載  component:resolve => (['須要加載的路由的地址',resolve]) 如component: resolve => require(['./page/linkParamsQuestion.vue'], resolve)
2.es提出的import  const HelloWorld = () => import('須要加載的模塊地址')

　　

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets
// 引入animated動畫
import '@/styles/lib/animate.min.css'
import '@/styles/lib/layer.css'

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

import './styles/index.scss' // global css
import App from './App'
import router from './router'
import store from './store'
import * as allFilters from './filters/allFilters'
Object.keys(allFilters).forEach(key => {
  Vue.filter(key, allFilters[key])
})

import '@/icons' // icon
// import FastClick from 'fastclick'
// FastClick.attach(document.body);

Vue.filter('changeMemberNum', function(val) {
  return val.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
})
// import '@/permission' // permission control

// 使用代理的方式請求URLaxios request
// import Axios from 'axios'
// import VueAxios from 'vue-axios'
// Vue.use(VueAxios, Axios)

// 微信js-sdk
const $wx = require('weixin-js-sdk');
Vue.prototype.$wechat = $wx;

import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);

// 頁面加載進度條顯示NProgress
import NProgress from 'nprogress' // Progress 進度條
import 'nprogress/nprogress.css'// Progress 進度條樣式
router.beforeEach((to, from, next) => {
  NProgress.start() // 開啓Progress
  NProgress.configure({ ease: 'ease', speed: 500 }); // 配置進度條
  next();
  NProgress.done()
})
router.afterEach(() => {
  NProgress.done() // 結束Progress
})

Vue.use(MintUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

　

 參考 & 感謝：vue-router官網 & 各路大神

 https://segmentfault.com/a/1190000009651628