Vue2.0三——Vue-router

我會從兩個方面來寫路由

自定義路由（以拉勾網爲例）

路由指的是在不刷新頁面的狀況下更新頁面

經過：#hash，例如：10.0.164.8:8080/index.html/#main 
而後經過H5的history對象的history.pushState()+popState事件實現路由切換

實現步驟：
(1)在script文件下建立路由表 routes.js

export default {
    '/' : 'Position' 首頁
    '/search': 'Search',
    '/mine' : 'Mine'
}

（2）在app.js中匹配路徑

import routes form  './routes'
//動態獲取組件
new Vue({
    el : '#root',
    data:{
    //定義當前路徑信息
      currentRoute: window.location.pathname   
    },
    computed : {    //生成子路由組件
        ViewComponent() {
            //根據路由找到匹配的組件名
            const MatchingView = routes[this.currentRoute];
            返回組件對象
            return MatchingView ？ require(`./page/${MatchingView}.vue`) ：require('./page/404.vue')
        }
    },
    //渲染組件
    render(h) {
        return h(this.ViewComponent)
    }
})

(3)在index.vue中的section放經過插槽存放porixtion mine search 組件

<section>
    <slot></slot> //插槽用來存放各個組件
</section>

(4)position.vue

import Index from './Index.vue'
export default {
    //導入Index組件
    data() {
        return{
            
        }
    },
    componets ： {
        Index //定義Index組件
    }
}

將template的內容外層用 <Index></Index>包(Index建個插槽)

(5)同理search也同樣

search.vue
import Index from './Index.vue'
export default {
    //導入Index組件
    data() {
        return{
            
        }
    },
    componets ： {
        Index //定義Index組件
    }
}

將template的內容外層用 <Index></Index>包

(6)點擊連接切換組件

經過history提供的事件
window.addEventListener('popstate',function(){
    vm.currentRoute = window.location.pathname
},false)

(7)定義點擊切換組件時的a標籤組件

VLink.vue 寫邏輯
    <template>
        <a :href='href' class="{active：isActive}">
            <slot></slot>
            @click.prevent='go'
        </a>
    </template>

    import routes from '../routes'
    export default {
        props : {               //對象類型
            href: {
                type ： String,
                required ： true
            }
        },
        computed: {
            isActive () {
            <!--判斷調用組件傳遞進來的href是不是當前路徑的href-->
                return this.href == this.$root.currentRoute
            }
        },
        methods:{
            go(){
               this.$rout.currentRoute = this.href
               window.history.pushState(null,routes[this.href],this.href)
            }
        }
    }

(8)通用組件，Vlink.vue 在index.vue中引入

import VLink form '../../vlink.vue'
在index.vue裏找到底部 ul li 用 v-link 標籤包住
<ul>
    <v-link href='/'>
        <li>
        
        </li>
    </v-link>
    <v-link href='/search'>
        <li>
        
        </li>
    </v-link>
    <v-link href='/mine'>
        <li>
        
        </li>
    </v-link>
</ul>
經過a連接
    <template>
        <a>
            <slot></slot>
        </a>
    </template>
    

    Vue.component('VLink',{
        template
    })

vue-router

仍是框架簡單 來來來

路由有三種導航鉤子：

• 1 、全局導航鉤子

  beforeEach
  beforeResolve
  afterEach

  每一個鉤子方法接收三個參數：
     to: Route : 即將要進入的目標 [路由對象]
     from: Route : 當前導航正要離開的路由
     next: Function : 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next
     方法的調用參數。
     next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是confirmed （確認的）。
     next(false): 中斷當前的導航。
     若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from
     路由對應的地址。
     next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。
     
     確保要調用 next方法，不然鉤子就不會被 resolved。

  例子：

  const router = new VueRouter({ ... })
     router.beforeEach((to, from, next) => {
         // do something 
         next();
     });
     
     router.afterEach((to, from, next) => {
         console.log(to.path);
     });
     
    原文連接：http://blog.csdn.net/sinat_17775997/article/details/68941078

• 2 、某個路由獨享的導航鉤子

  beforeEnter

• 3 、路由組件裏的導航鉤子

  beforeRouteEnter
  beforeRouteUpdate (2.2 新增)
  beforeRouteLeave
  例子：

  let fromPath = '';
  export default{
     beforeRouteEnter (to, from, next) {
          // 在渲染該組件的對應路由被 confirm 前調用
          // 不！能！獲取組件實例 `this`
          // 由於當鉤子執行前，組件實例還沒被建立
          fromPath = from.path;
          next();
     },
  }

（1）安裝插件 npm i vue-router -D

app.js引入：
import Vue from 'vue'
import VueRouter from 'vue-router'
import '../../app.scss'
import routes from './routes'

Vue.use(VueRouter)

const routes = new VueRouter({
    routes
})
new Vue({
    el:'#root',
    router
})

配置：
webpack.config.js,跟plugins同級
externals : {
    'vue' : 'window.Vue'
    'vue-router':'window.VueRouter'
}
會將第三方組件抽離出去
把node_modules/vue/dist/vue.min.js
/vue/dist/vue-router/vue-router.min.js
放到根目錄並在index.html中引入

這樣減少了app.js的大小

(2)定義

一、 scripts下建立routes.js

import Index frmm './pages/Index.vue'
import Position from './pages/Position.vue'
import Search from './pages/Search.vue'
import Mine from './pages/Mine.vue'

路由表：
export default [
    {
        path: '/',
        componebt: 'Index',
        childern: [
            {
                path:'/position',
                component : Position,
            },
            {
                path:'/search',
                component : Search
            },
            {
                path:'/mine',
                component : Mine
            },
        ]
    }
]

2.首頁 更改入口
    index.html
    <router-view></route-view>
    
    index.vue
    <router-view></route-view>
    
index.vue
import {routerLink} from 'vue-router'
//聲明式跳轉
<router-link :to='{name:'Detail',params:{xid:123}}'>
    去詳情頁
</router-link> 
獲取：this.$route.params.xid
編程時跳轉
this.$router.history.push({name:'Detail',params:{xid:123}})